Good looking graphics in C# window form - c#

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.

Related

C# Drawing a Bitmap on a certain point in a PictureBox

I currently have a Bitmap image. I need to place this image at a certain coordinate inside a PictureBox. Specifically, I'm looking to place it 5 pixels from the top and 5 pixels from the left. The bitmap will be of different lengths, so I want the starting point to always start drawing the Bitmap at this specific point.
As an example, here are two "Bitmaps" that both start at the coordinate 5,5, with different lengths. Imagine the Gray is the PictureBox:
I've tried something like passing in a PictureBox and using graphics to draw the bitmap:
private void setQuantity(PictureBox pb, int quantity) {
Graphics g = pb.CreateGraphics();
g.DrawImage(iqc.createQuantityImage(quantity), 0, 0);
g.Dispose();
}
iqc.createQuantityImage() returns a Bitmap
But this doesn't seem to draw anything. I have also changed the x and y and nothing changes.
I'd like to be able to specify the exact coordinate or point inside the PictureBox if possible.
Thanks for any help!
You can draw image in PictureBox at any location by adding an event handler to its Paint method as follows;
private void PictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(_myBitmap, new Point(5, 5)); //Here new Point(x,y) determines location in pictureBox where you want to draw the bitmap.
}

PictureBox background equal to other PictureBox while moving?

C# Beginner here.
I'm making a 2D Tanks game, and everything's working out nicely so far.
Both of my tanks are Picture Boxes, and so is my Missile.
The image of the missile and tanks in the PictureBoxes have transparent BackColour properties. The problem is, the background of the missile & tanks are not transparent while on top of the other picturebox (pbBackground). It looks like this.
I'm aware that using different PB's is an inefficient way of going about it, but I've come pretty far and I don't really know any better. Anyways, as you can see, the Missile and Tank PB backgrounds show the form colour. When I downloaded the images, the backgrounds were transparent, I'm sure of it. How do I go about making the background of my PB's truly transparent? (Matching the background of the Overlapped PB?)
I saw this but it doesn't really match my scenario and I don't understand the solution.
UPDATE: Okay, I followed Tommy's advice, is this the right way to go about moving it along pbBackground in a timer constantly changing MissileX and MissileY? Currently this does nothing.
using (Graphics drawmissile = Graphics.FromImage(pbBackground.Image))
{
drawmissile.DrawImage(pbMissile.Image, new Point(MissileX,Convert.ToInt32(MissileY)));
}
PictureBox is opaque. And PictureBox is not efficient.
For making games, you should study Paint event which directly draws on your form.
Bitmap backgroundBitmap = new Bitmap("background");
Bitmap tankBitmap = new Bitmap("tank");
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(backgroundBitmap, 0, 0);
e.Graphics.DrawImage(tankBitmap, 30, 30);
}
private void timer1_Tick(object sender, EventArgs e)
{
this.Invalidate(); //trigger Form1_Paint to draw next frame
}
Don't layer multiple PictureBox instances on top of each other. It will get very confusing, very quickly.
Instead, use one single PictureBox and use Paint to draw your images to it. In this way, you can have much more control over the graphics operations happening.
Have a look at this
private void DrawIt()
{
System.Drawing.Graphics graphics = this.CreateGraphics();
System.Drawing.Rectangle rectangle = new System.Drawing.Rectangle(
50, 50, 150, 150);
graphics.DrawEllipse(System.Drawing.Pens.Black, rectangle);
graphics.DrawRectangle(System.Drawing.Pens.Red, rectangle);
}
In this example they demonstrate how to draw shapes directly onto a Form. You would use your PictureBox there instead. You can also draw images.
There's lots of ways to draw shapes onto a form using a System.Drawing.Graphics object. Try taking a look at this question for a comparison.
Tommy's answer is right, however, if you're dead set on using pictureboxes (a bad idea), set the overlapping picturebox backgroundcolour to Transparent and the Form's Background to whatever image. TIL the Transparent BackColour just uses the form colour / image. Tommy actually has the right answer here, but this is what I did to fix my problem (the lazy way).

Use picturebox as a canvas and draw text

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);
}
}

How to delete a drawn circle in c# windows form?

I have drawn a circle in windows form
Pen pen = new Pen(Color.Black, 3);
Graphics gr = this.CreateGraphics();
gr.DrawEllipse(pen, 5,5,20,20);
How to delete it...
You have to clear your Graphic:
Graphics.Clear();
But all drawn figures will be cleared. Simply, you will then need to redraw all figures except that circle.
Also, you can use the Invalidate method:
Control.Invalidate()
It indicates a region to be redrawn inside your Graphics. But if you have intersecting figures you will have to redraw the figures you want visible inside the region except the circle.
This can become messy, you may want to check out how to design a control graph or use any graph layout library.
You can invalidate the draw region you want to refresh for example:
this.Invalidate();
on the form...
Assuming you're subscribing to the Paint event or overriding the protected OnPaint routine, then you will need to perform something like this:
bool paint = false;
protected override void OnPaint(object sender, PaintEventArgs e)
{
if (paint)
{
// Draw circle.
}
}
Then when you want to stop painting a circle:
paint = false;
this.Invalidate(); // Forces a redraw
You can make a figure of same dimensions using the backColor of your control in which you are drawing
use after your code to clear your figure.
Pen p = new Pen(this.BackColor);
gr.DrawEllipse(p, 5,5,20,20);
In fact, you can delete your circle and nothing but your circle.
Everything you need is something like a screenshot of the "before state" of the area you want to clear, to make a TextureBrush from it. You can achieve that step by something like this:
Bitmap _Background = new Bitmap(this.Width, this.Height);
Graphics.FromImage(_Background).CopyFromScreen(this.Left, this.Top, 0, 0, this.Size);
The first line will give you a bitmap in your windows forms size. The second line will save a screenshot of it in the _Background-bitmap.
Now you create a TextureBrush out of it:
Brush brsBackground = new TextureBrush(_Background);
The next thing you need are the dimensions of your circle, so you should save them into a variable, if they are not a fix value. When you got them at hand, you can clear the specific area like this:
Graphics gr = this.CreateGraphics();
gr.FillEllipse(brsBackground, 5, 5, 20, 20); // values referred to your example
Done!
Even complex figures are able to be deleted by this, like a GraphicsPath for example:
GraphicsPath gp = new GraphicsPath(); // any kind of GraphicsPath
gr.FillRegion(brsBackground, new Region(gp));
You don't "delete" it per se, there's nothing to delete. It's a drawing, you draw something else over it or you can call the Graphics.Clear() method.
If u are using Invalidate() and is not working, make a panel.Refresh().
That will work on you.
just make another control with the attributes etc. that you want, make the visibility to false and set the region of the control to the other control like this:
pen.Region = pen2.Region;
It is very simple to delete a drawn circle from c.
There is only four steps:-
Open turbo app
go to the command where you had drawn the circle
drag the command
click on delete button

Antialiased text on transparent bitmap

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?

Categories