C # GDI + programming (II)

Common drawing functions

DrawArc Draw an arc

Example: Graphics. DrawArc (pen,0,0,200,200,90,120)

The second-to-last argument, which represents the starting degree, is the span of the arc in degrees. For example, the starting degree is 90, the span is 120 arc.

The red one is the arc. A similar approach also has drawpie to draw a fan-shaped and fillpie-filled pie. All have a starting degree, across degrees.

DrawPolygon Drawing Polygons

Example: Point []pt=new point[]{new Point (0,50), new Point (0,100), new Point (100,100)};
Graphics. DrawPolygon (pen, PT);

The point array specifies the position, and the number of points, for each of the points. The polygons drawn by DrawPolygon are closed, and the DrawPolygon automatically connects the 1th and last points.

DrawCurve plotting Cardinal splines

Example: point[] pt = new point[] {new Point (0, 0), New Point (+), new Point (200,0)};
Graphics. DrawCurve (pen, PT, 1.5f);

The last parameter represents the tension value, for this drawing function, I am not very familiar with it, I can only know what it is about. It's not quite as well.

There must be at least three points in order to form a curve. Can look at a diagram, I copied from the GDI + reference material.

DrawBezier to draw Bezier splines

Example: Graphics. DrawBezier (pen, 100, 0, 200, 20, 0, 80, 100, 100)

Bezier splines are composed of four points. The first point, and the last point acts as the two point of the line, while the other two points act as magnets, although the lines do not pass through the two magnet points,

But these two magnet points will suck the line toward it. Thus constituting a Bezier spline.

Path GraphicsPath

GraphicsPath Class Property System.Drawing.Drawing2D namespace

The path is made up of a variety of lines, so the rectangle can also be seen as being made up of four straight lines, and the circle can be seen as a couple of arcs.

So the GraphicsPath class has a path function that adds various shapes, such as the AddLine Straight path, the AddEllipse elliptical path, the AddRectangle rectangle path,

Addbezier Bezier Path, addstring string path, and so on.

These paths are added and, of course, not visible, and we can use the DrawPath function in the graphics class to describe the trajectory of the path, using a brush.

See Example:

private void Formpaint (Object sender, PaintEventArgs e)
{
Graphics graphics = E.graphics;
Pen pen = new Pen (Color.FromArgb (0, 255, 0), 2);
Rectangle rect = new Rectangle (10, 10, 100, 100);
GraphicsPath Grcpath = new GraphicsPath ();
Grcpath.addrectangle (rect);
Grcpath.addellipse (rect);
To add a string path
FontFamily Famfont = new FontFamily ("blackbody");
Grcpath.addstring ("A", Famfont, (int) fontstyle.underline, 80f, rect, null);
Draw Path
Graphics. DrawPath (pen, Grcpath);
}

Path painting Brush PathGradientBrush

Examples of Use:

private void Formpaint (Object sender, PaintEventArgs e)
{
Create path
GraphicsPath path = new GraphicsPath ();
Rectangle rect = new Rectangle (0, 0, 100, 100);
Path. AddRectangle (rect);
Create a path paint brush
PathGradientBrush brush = new PathGradientBrush (path);
Center point color is white
Brush. Centercolor = Color.White;
The color on the path (point) is black
Brush. Surroundcolors = new color[] {color.black};
Fill a rectangle with a path paint brush
E.graphics.fillrectangle (brush, rect);
}

The color of the center point above is white, the color on the path (point) is black, that is, from the center point to the point on each path, it is white to black gradient.

Alternatively, you can specify the center point yourself, if you do not want to use the PathGradientBrush computed center point, specify CenterPoint, such as a brush. CenterPoint = new Point (20, 50);

path painter multiple color gradients

A variety of color gradients in the previous linear gradient has been introduced, then the path of a variety of color gradients are similar, look directly at the example:

private void Formpaint (Object sender, PaintEventArgs e)
{
Create path
GraphicsPath path = new GraphicsPath ();
Rectangle rect = new Rectangle (0, 0, 100, 100);
Path. AddRectangle (rect);
Create a path paint brush
PathGradientBrush brush = new PathGradientBrush (path);

Create a ColorBlend object that specifies multiple color gradient information
ColorBlend color_blend=new colorblend ();
Specify several colors
Color_blend. Colors=new Color[]{color.red,color.green,color.white};
Specify the range of colors
Color_blend. Positions=new float[]{0/3f,2/3f,3/3f};

Brush. Interpolationcolors = Color_blend;
Fill a rectangle with a path paint brush
E.graphics.fillrectangle (brush, rect);
}

The color of the center point is color_blend. Colors the last of the array, like a variety of color gradients, you can put the center point, to each point on the path, as a line, and then the line of 3 2 is what color to what color gradient, one of the 3 is which color to which color gradient.

Above is the red to green gradient range is: 0~2/3, green to White (center point color): 2/3~1; Suppose the length of the whole line is replaced by one. In addition, you can customize the center point location.

Draw a brush with a dot-formed path

Example:

private void Formpaint (Object sender, PaintEventArgs e)
{
Rectangle rect = new Rectangle (0, 0, 100, 100);
Point []pts=new point[]{new Point (50,0), new Point (0,100), new Point (100,100)};
PathGradientBrush brush=new PathGradientBrush (pts);
Center Point Color
Brush. Centercolor=color.white;
The color on the path point
Brush. Surroundcolors=new Color[]{color.black};
E.graphics.fillrectangle (brush, rect);
}

This dot-made graphic is created directly from the path brush, not through GraphicsPath, or you can specify more than three points, and the path brush automatically connects these points (in order), forming a graphic, and then filling it, but the fill is limited to the shapes that make up the points. Like above, a rectangle is filled with this brush,

But the parts beyond this triangle are not filled. This is one thing with the graphics path, which is confined to the fill path. This graphical creation can also be done in GraphicsPath way, such as adding Addpolygon polygon path functions inside. It is then populated with the FillPolygon function in the graphics class.

In addition, you can also use AddLines add path function to complete, this function is composed of straight to the graph, but the root is still used points to compose, two points constitute a straight line!

However, the resulting graphic must be closed, otherwise it will not achieve the desired result. Then call FillPath to populate the path.

AddLines Example:

private void Formpaint (Object sender, PaintEventArgs e)
{
Create path
GraphicsPath path = new GraphicsPath ();
Rectangle rect = new Rectangle (0, 0, 100, 100);
Point[] pts = new point[] {new Point (0), new Point (0, +), new Point (100, 100)};
Path. AddLines (pts);
PathGradientBrush brush = new PathGradientBrush (path);
Center Point Color
Brush. Centercolor=color.white;
The color on the path point
Brush. Surroundcolors=new Color[]{color.black};

E.graphics.fillpath (brush, path);

}

The FillPath function is like DrawPath, but DrawPath uses a brush to describe the path, and FillPath uses "fill" to describe the path.

Note that the path of the FillPath fill has a certain limit and is closed. Do not conflict.

Surroundcolors attribute members in the PathGradientBrush class, multiple colors on the path point

Before, I only specified one color, surroundcolors is a color array, then it can specify a variety of colors. Specifies the color of the corner point on a graph,

For example, the triangle, which has three corners, you can give these three corner points to specify a different three colors, but not four colors, because the triangle has only three corners, out of range will be wrong.

The rectangle is the same, you can specify four colors, but if you specify fewer than the number of corners, such as rectangles, I only specify a corner color.

So the rest of the corners are all using the last color value of the surroundcolors array.

For the first example of a path brush, let's modify it to specify the color of the Four corners. As follows:

private void Formpaint (Object sender, PaintEventArgs e)
{
Create path
GraphicsPath path = new GraphicsPath ();
Rectangle rect = new Rectangle (0, 0, 100, 100);
Path. AddRectangle (rect);
Create a path paint brush
PathGradientBrush brush = new PathGradientBrush (path);
Center point color is white
Brush. Centercolor = Color.White;
Specify colors for different corner points
Brush. Surroundcolors = new color[] {color.black,color.red,color.green,color.blue};
Fill a rectangle with a path paint brush
E.graphics.fillrectangle (brush, rect);
}

Four corners of the color, with the eyes can see the approximate difference, respectively, is black, red, blue, green. Corresponds to upper left (0,0), upper right (100,0), lower right (100,100),

Lower left (0,100) four corner points.

Let's talk about how this gradient brush looks, or what it's based on. First, the corner point (0,0) is specified as Color.Black in the Surroundcolos,

The corner Point (100,0) is color.red, and the two points can be connected in a straight line. The line is still gradual, from black to red. And this line is on the path.

Then each point on this path (straight line) has a different color.

For example (0,0) is black, (1,0) is a light bit of black, ... (99,0) is the Dark red (100,0) is red.

and the center point color is white, so the center point to 0,0 this line is from white to black gradient, and (1,0) is from white to a little black gradient.

The same is true for gradients on other corners.

The above gradient is formed by this rule.

Another example of a triangle:

private void Formpaint (Object sender, PaintEventArgs e)
{
Create path
GraphicsPath path = new GraphicsPath ();
Point []pts = new point[] {new Point (0), new Point (0, +), new Point (100, 100)};
Path. AddLines (pts);

PathGradientBrush brush=new PathGradientBrush (path);
Center Point Color White
Brush. Centercolor=color.white;
Corner color: Red, green, blue. ORDER BY PTS Array
Brush. Surroundcolors = new color[] {color.red, color.green, color.blue};
Fill a path with a path paint brush
E.graphics.fillpath (brush, path);
}

After understanding the above knowledge point, you can try to do a pentagram graphic example (with a path gradient brush, and use a different corner color).