I'd like to draw antialiased text on a transparent bitmap and have the antialiasing drawn as alpha blended pixels. This way, I can draw the bitmap onto any color surface (or an image, for that matter) and the antialiasing still looks fine.
Here is a simplified sample showing the problem:
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
Bitmap bitmap = new Bitmap(this.Width, this.Height);
Graphics g = Graphics.FromImage(bitmap);
g.Clear(Color.Empty);
g.DrawString("hello world", new Font(this.Font.FontFamily, 24), Brushes.Blue, new Point(50, 50));
e.Graphics.DrawImage(bitmap, new Point(0, 0));
}
And here is the result:
The ultimate goal of this is to use UpdateLayeredWindow to draw my transparent alpha blended window. I am creating a Conky-like application, and I'd like to be able to use ClearType rendering for text (this is easy without antialiasing, of course).
Currently, I grab the screen behind the form, draw that, and then draw my text. It looks good, but has to be updated and is slow to draw. Any other ideas to accomplish drawing text on the desktop would also be welcome.
Your text is displayed as it is because you have ClearType subpixel anti-aliasing mode enabled (which is the default on Vista and above). ClearType, by definintion, cannot play nice with alpha channel, since it blends colors, and thus isn't background-agnostic. So it ignores the alpha channel, and blends to black (which is your transparent color otherwise is). You need to enable plain grayscale anti-aliasing for the desired effect:
g.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
I'm not sure if it's really necessary, but if you want to do alpha-blending, you should specify a 32-bit image:
Bitmap bitmap = new Bitmap(this.Width, this.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
Using your example, I was able to make the text look decent by adding a text rendering hint:
g.Clear(Color.Empty);
g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
g.DrawString("hello world", new Font(this.Font.FontFamily, 24), Brushes.Blue, new Point(50, 50));
Is this doing what you want, or just hiding the problem?
Related
I want to make very simplistic paint/image editor. Mainly, for pixel editing, but that doesn't seem relevant.
To ease up my effort, I decided to keep the image size at 16x16.
I populate the form, add a PixelBox and slap a default image on it.
Of course, I need to make the pixels visible, set the interpolation to NearestNeighbor.
Then, I stretch the pixelbox to 320x320. And there the situation arises.
The image is displayed as thus:
Cropped image
Could someone shed some light on this? This is just a 16x16 image with a checkerboard pattern that I made, but I can't figure out why it is displayed with that offset at the top left.
Also, no code as been yet added. I assume this is default behavior?
If you look at the examples on the page that exact same error happens, so it must be a bug on the PixelBox.
Instead of using a custom control for this type of operation just use the standard PictureBox and scale the image by yourself:
public Bitmap ScaleBitmap(Bitmap src, Size NewSize)
{
Bitmap bmp = new Bitmap(NewSize.Width, NewSize.Height, src.PixelFormat);
Graphics g = Graphics.FromImage(src);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.DrawImage(src, new Rectangle(Point.Empty, NewSize), new Rectangle(0, 0, src.Width, src.Height), GraphicsUnit.Pixel);
g.Dispose();
return bmp;
}
I want to use a PictureBox as a canvas and draw some text on it and save.
I wrote this piece of code but I'm not sure if im doing this the correct way:
Bitmap b = new Bitmap(pictureBox1.Width, pictureBox1.Height);
Graphics g = Graphics.FromImage(b);
g.FillRectangle(new SolidBrush(Color.White), new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height)); // i used this code to make the background color white
g.DrawString("some text", new Font("Times New Roman", 20), new SolidBrush(Color.Red), new PointF(10, 10));
pictureBox1.Image = b;
This code works well but when I want to change the background color of the image I have to redraw the text.
Is there a way to change the background color without having to redraw the text?
Writing a Paint program is a lot of fun, but you need to plan ahead for all or most of the features you want.
So far you have these:
A background you can change
A way to modify an image by drawing text on it
The need to save it all to a file
Here are a few more things you will need:
Other tools than just text, like lines, rectangles etc..
A choice of colors and pens with widths
A way to undo one or more steps
Here are few thing that are nice to have:
A way to help with drawing and positioning with the mouse
Other type backgrounds like a canvas or pergament paper
The ability to draw with some level of tranparency
A redo feature (*)
Rotation and scaling (***)
Levels (*****)
Some things are harder (*) or a lot harder (***) than others, but all get hard when you decide to patch them on too late..
Do read this post (starting at 'actually') about PictureBoxes, which explain how it is the ideal choice for a Paint program.
Your original piece of code and your question have these problems:
You seem to think that repeating anything, like redrawing the text is wrong. It is not. Windows redraws huge numbers of things all the time..
You have mixed two of the tasks which really should be separate.
You have not parametrizied anything, most notably the drawing of the text should use several variables:
Font
Brush
Position
the text itself
The same will be true once you draw lines or rectangles..
So here are the hints how do get it right:
Use the BackgroundColor and/or the BackgroundImage of the Picturebox to dynamically change the background!
Collect all things to draw in a List<someDrawActionclass>
Combine all drawings by drawing it into he Picturebox's Image
Use the Paint event to draw supporting things like the temporary rectangle or line while moving the mouse. On MouseUp you add it to the list..
So, coming to the end, let's fix your code..:
You set the backgound with a function like this:
void setBackground(Color col, string paperFile)
{
if (paperFile == "") pictureBox1.BackColor = col;
else pictureBox1.BackgroundImage = Image.FromFile(paperFile);
}
you can call it like this: setBackground(Color.White, "");
To draw a piece of text into the Image of the PictureBox, first make sure you have one:
void newCanvas()
{
Bitmap bmp = new Bitmap(pictureBox1.ClientSize.Width, pictureBox1.ClientSize.Height);
pictureBox1.Image = bmp;
}
Now you can write a function to write text. You really should not hard-code any of the settings, let alone the text! This is just a quick and very dirty example..:
void drawText()
{
using (Font font = new Font("Arial", 24f))
using (Graphics G = Graphics.FromImage(pictureBox1.Image))
{
// no anti-aliasing, please
G.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixel;
G.DrawString("Hello World", font, Brushes.Orange, 123f, 234f);
}
pictureBox1.Invalidate();
}
See here and here for a few remarks on how to create a drawAction class to store all the things your drawing is made up from..!
The last point is how to save all layers of the PictureBox:
void saveImage(string filename)
{
using (Bitmap bmp = new Bitmap(pictureBox1.ClientSize.Width,
pictureBox1.ClientSize.Height))
{
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
bmp.Save("yourFileName.png", ImageFormat.Png);
}
}
I need to create some simple graphics in a windows form using C#. By simple I mean lines, circles etc. However, when I draw e.g. a filled circle, the edge is not smooth (as expected when drawing a circle using square pixels), but when drawing the same circle with the same number of pixels in a vector program it looks perfect. I have been drawing in Inkscape for this example.
Maybe the vector software uses some sort of render function to smooth the colors, but is this possible in C# without creating too much code? Here is an example of the code, which is using Graphics to create a canvas to draw on.
private void StatGraphicsPanel_Paint(object sender, PaintEventArgs e)
{
Graphics canvas = e.Graphics;
Brush brush = Brushes.Aqua;
canvas.FillEllipse(brush, 0, 0, 10, 10);
}
Solution
This code does the trick:
private void StatGraphicsPanel_Paint(object sender, PaintEventArgs e)
{
Graphics canvas = e.Graphics;
canvas.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
Brush brush = Brushes.Aqua;
canvas.FillEllipse(brush, 0, 0, 10, 10);
}
You want to use the System.Drawing.Graphics.SmoothingMode property. Before beginning to use your Graphics object, do this:
canvas.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
That should give you a nice anti-aliased ellipse instead of the default jaggy one.
Similarly, if you want to draw high-quality text in an image, use the System.Drawing.Graphics.TextRenderingHint property.
As others have mentioned in comments, you might want to consider using WPF instead. WinForms are dated.
I'm rendering an image into a System.Drawing.Bitmap and subsequently drawing it into a window, however I can see that the edges are being anti-aliased. How do prevent this?
Some more detail. The bitmap is created like thus:
new Bitmap (this.Width, this.Height, Imaging.PixelFormat.Format32bppArgb)
I then set pixels to either Color.Black or Color.White. I've tried using both Bitmap.SetPixel and writing bytes directly to the bitmap data using Bitmap.LockBits.
Once the bitmap is ready I draw it in my Form.OnPaint override:
pea.Graphics.DrawImage
( !this.bitmap
, this.ClientRectangle
, new Rectangle (0, 0, this.Width, this.Height)
, GraphicsUnit.Pixel
)
Every pixel should either black or white however I can see that pixels at the edges are grey.
Set the InterpolationMode property to NearestNeighbor and PixelOffsetMode to None.
pea.Graphics.InterpolationMode = InterpolationMode.NearestNeighbor;
pea.Graphics.PixelOffsetMode = PixelOffsetMode.None; // or PixelOffsetMode.Half
Drawing the bitmap unscaled is best. In which case you probably want to use the ClientSize.Width and Height properties to initialize the bitmap. Odds are good that you are making the bitmap too large right now by including the form's border and caption. I can't tell from the snippet.
I'm trying to scale down a Bitmap using GDI+ by doing the following:
Bitmap newImage = new Bitmap(NewWidth, NewHeight, Im.PixelFormat);
Graphics g = Graphics.FromImage(newImage);
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.ScaleTransform(0.1, 0.1); // 10%
g.DrawImage(Im, 0, 0, Im.Width, Im.Height);
Im is the original image, NewWidth and NewHeight are 10% or the original image. I've tested this on a 1000x1000 image (shrinking it down to 100x100)
The scaling is done correctly with high quality as promised but for some reason there is a gray border on the left, right and top borders (none on the bottom).
I assume this is due to the fact the all the image borders are white and the color "outside" of the bitmap is by default black so some of the default black get mixed into the scaling interpolation.
I looked for a way to set the default background color to white (white will do just fine) but couldn't find it anywhere..
My alternative is to pad the border with a white frame, scale the image down and the crop it but I was wondering if there is a simpler and less CPU consuming way?
Any ideas?
Well. After some more digging I found it..
System.Drawing.Imaging.ImageAttributes Att = new System.Drawing.Imaging.ImageAttributes();
Att.SetWrapMode(System.Drawing.Drawing2D.WrapMode.Clamp, System.Drawing.Color.White);
g.DrawImage(Im, new Rectangle(0,0,Im.Width,Im.Height), 0, 0, Im.Width, Im.Height, GraphicsUnit.Pixel, Att);
Try adding an alpha overlay with an extra transparent pixel or two on all sides. This should get a better result than using either an explicit or implied solid color frame. Though converting to RGBA and adding the frame has a higher execution cost, if you are really interested in high quality and don't want to switch graphics libraries it may be the way to go.