C# winform drawing summary
1. Drawing steps (1)
First prepare a drawing board:
How to create artboard?
If you want to process the original image, such as rotating the image, adding text, etc., you can directly obtain the artboard object from the original image.
Image img = Image.FromFile(imgPath);
Graphics graphics = Graphics.FromImage(img);
If you want to draw a new picture, you can generate a drawing board through the width and height of the picture to be saved.
Bitmap bmp = new Bitmap(width, height);
Graphics graph = Graphics.FromImage(bmp);
There are three main ways to create an artboard:
A: Directly refer to the Graphics object in the Paint event of the form or control
B: Use the CreateGraphics method of the form or a control
C: Create a Graphics object from any object that inherits from the image
private void Form1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics; //创建画板,这里的画板是由Form提供的.
}
Then, we ask for a pen:
private void Form1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics; //创建画板,这里的画板是由Form提供的.
Pen p = new Pen(Color.Blue, 2);//定义了一个蓝色,宽度为的画笔
}
painting:
private void Form1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics; //创建画板,这里的画板是由Form提供的.
Pen p = new Pen(Color.Blue, 2);//定义了一个蓝色,宽度为的画笔
g.DrawLine(p, 10, 10, 100, 100);//在画板上画直线,起始坐标为(10,10),终点坐标为(100,100)
g.DrawRectangle(p, 10, 10, 100, 100);//在画板上画矩形,起始坐标为(10,10),宽为,高为
g.DrawEllipse(p, 10, 10, 100, 100);//在画板上画椭圆,起始坐标为(10,10),外接矩形的宽为,高为
}
2. The specific operation steps of simple drawing (2)
1. First of all, let’s look at the Pen we used above .
The properties of the Pen mainly include: Color (color), DashCap (the shape of the end point of the dash), DashStyle (the style of the dashed line), EndCap (the shape of the end of the line), StartCap ( Line head shape), Width (thickness), etc.
We can use Pen to draw dotted lines, straight lines with arrows, etc.
Pen p = new Pen(Color.Blue, 5);//设置笔的粗细为,颜色为蓝色
Graphics g = this.CreateGraphics();
//画虚线
p.DashStyle = DashStyle.Dot;//定义虚线的样式为点
g.DrawLine(p, 10, 10, 200, 10);
//自定义虚线
p.DashPattern = new float[] {
2, 1 };//设置短划线和空白部分的数组
g.DrawLine(p, 10, 20, 200, 20);
//画箭头,只对不封闭曲线有用
p.DashStyle = DashStyle.Solid;//恢复实线
p.EndCap = LineCap.ArrowAnchor;//定义线尾的样式为箭头
g.DrawLine(p, 10, 30, 200, 30);
g.Dispose();
p.Dispose();
brush properties
Next, let's look at the use of Brush
Function: We can use brushes to fill various graphic shapes, such as rectangles, ellipses, sectors, polygons and closed paths, etc. There are several different types of brushes: •SolidBrush:
brush In its simplest form, paint with a solid color
HatchBrush: Similar to SolidBrush, but you can use this class to choose from a large number of preset patterns to use when painting instead of a solid color
TextureBrush: Use a texture (such as an image) to paint
•LinearGradientBrush: Draws with two colors mixed along a gradient
•PathGradientBrush: Draws with complex gradients of mixed colors based on a unique path defined by the programmer.
Here we just briefly introduce the use of several of them:
Graphics g = this.CreateGraphics();
Rectangle rect = new Rectangle(10, 10, 50, 50);//定义矩形,参数为起点横纵坐标以及其长和宽
//单色填充
SolidBrush b1 = new SolidBrush(Color.Blue);//定义单色画刷
g.FillRectangle(b1, rect);//填充这个矩形
//字符串
g.DrawString("字符串", new Font("宋体", 10), b1, new PointF(90, 10));
//用图片填充
TextureBrush b2 = new TextureBrush(Image.FromFile(@"e:\picture\1.jpg"));
rect.Location = new Point(10, 70);//更改这个矩形的起点坐标
rect.Width = 200;//更改这个矩形的宽来
rect.Height = 200;//更改这个矩形的高
g.FillRectangle(b2, rect);
//用渐变色填充
rect.Location = new Point(10, 290);
LinearGradientBrush b3 = new LinearGradientBrush(rect, Color.Yellow , Color.Black , LinearGradientMode.Horizontal);
g.FillRectangle(b3, rect);
1.Brush is an abstract class and cannot be instantiated directly by new
2. It has 5 derived classes, which implement different types of brushes respectively
① SolideBrush: solid brush (the simplest)
② HatchBrush: brush with shadow lines;
③ LinearGradientBrush Fill the brush with linear gradient of color;
④ PathGradientBrush Fill the brush with color gradient along the path;
⑤ TextureBrush Use the image to fill the brush
3. Use the Brushes class
Brushes.Red, Brushes.Yellow;
Coordinate axis transformation
The coordinate axes in winform are different from the rectangular coordinate axes we usually contact. The direction of the coordinate axes in winform is completely opposite:
GDI+ coordinate system
GDI+ coordinate system is a two-dimensional coordinate system, but it is a little different. The origin of is in the upper left corner. As shown below:
Next, we come to the actual operation, by rotating the direction of the coordinate axis to draw patterns at different angles, or by changing the position of the coordinate origin to balance the position of the coordinate axis.
Graphics g = this.CreateGraphics();
//单色填充
//SolidBrush b1 = new SolidBrush(Color.Blue);//定义单色画刷
Pen p = new Pen(Color.Blue,1);
//转变坐标轴角度
for (int i = 0; i < 90; i++)
{
g.RotateTransform(i);//每旋转一度就画一条线
g.DrawLine(p, 0, 0, 100, 0);
g.ResetTransform();//恢复坐标轴坐标
}
//平移坐标轴
g.TranslateTransform(100, 100);
g.DrawLine(p, 0, 0, 100, 0);
g.ResetTransform();
//先平移到指定坐标,然后进行度旋转
g.TranslateTransform(100,200);
for (int i = 0; i < 8; i++)
{
g.RotateTransform(45);
g.DrawLine(p, 0, 0, 100, 0);
}
g.Dispose();
| draw lines | explain |
|---|---|
| DrawLine | draws a line connecting two points specified by a coordinate object |
| DrawLines | Draws a column of line segments connecting a set of Point structures |
| DrawBezier | Draws a Bezier spline defined by four Point structures |
| DrawBeziers | Draws a series of Bezier splines from an array of Point structures |
| DrawCurve | Draws a cardinal spline through a specified set of Point structures |
| draw fillable line | explain |
|---|---|
| DrawEllipse | draws an ellipse specified by a pair of coordinates, width and height |
| DrawPath | Draw the GraphicsPath object |
| DrawPie | draws a sector specified by a coordinate object, width and height, and an ellipse specified by two rays |
| DrawPolygon | Draws a polygon defined by an array of Point structures |
| DrawRectangle | Plotted by coordinate pairs. the rectangle specified by the width and height |
| DrawRectangles | Draws a series of rectangles specified by the Rectangle structure |
| DrawArc | draws an arc representing the portion of an ellipse specified by a pair of coordinates, width and height |
| filled area | explain |
|---|---|
| FillEllipse | fills the interior of an ellipse defined by a bounding box specified by a pair of coordinates, a height, and a width |
| FillPath | Fills the interior of the GraphicsPath object |
| FillPie | Fill the inside of the sector |
| FillPolygon | fill polygon interior |
| FillRectangle | fills the interior of a rectangle specified by a pair of coordinates, a width, and a height |
| FillRectangles | fills the interior of a matrix of columns specified by a Rectangle structure |
| FillRegion | Fill the interior of the Region object |
| Draw strings, pictures, icons | explain |
|---|---|
| DrawString | Draws the specified text string at the specified position and using the specified Brush and Font objects |
| DrawIcon | Draws the image represented by the specified Icon object at the specified coordinates |
| DrawImage | Draws the specified Image object at the specified position and at its original size |
| other | explain |
|---|---|
| MeasureString(String, Font) | Measures the specified string drawn with the specified Font. |
| FromImage | Creates a Graphics object for the row from the specified Image object |
| Save | Saves the current state of this Graphics object, and the GraphicsState object identifies the saved state |
| Clear | Clears the entire drawing surface and fills it with the specified background color |
| Dispose | Releases all resources used by this Graphics object |