Common WPF path examples

The demo is here. Download it if you don't want to read the article.

Http://files.cnblogs.com/xiaokang088/WpfPathExample.zip

Basic path

In upper case, M indicates that startpoint is the absolute value; in lower case, M indicates that startpoint is the offset relative to the previous point. If it is (0, 0), it indicates that there is no offset. When you move the command to list multiple points, even if you specify a line command, lines connecting these points are drawn. For example, M 200,400

 

Creation method:

<Path stroke = "green" strokethickness = "3" Data = "m 200,400"/>

 

<Path stroke = "gold" strokethickness = "3">

<Path. Data>

<Pathgeometry>

& Lt; pathfigure startpoint = "200,200" & gt;

<Pathfigure. segments>

<Linesegment point = "400,100" type = "codeph" text = "/codeph"/>

</Pathfigure. segments>

</Pathfigure>

</Pathgeometry>

</Path. Data>

</Path>

 

# Region create method 1

Path = New Path ();

Pathgeometry = new pathgeometry ();

Pathfigure = new pathfigure ();

Pathfigure. startpoint = new point (400,300 );

Pathsegmentcollection segmentcollection = new pathsegmentcollection ();

Segmentcollection. Add (New linesegment () {point = new point (600,100 )});

Pathfigure. segments = segmentcollection;

Pathgeometry. Figures = new pathfigurecollection () {pathfigure };

Path. Data = pathgeometry;

Path. Stroke = new solidcolorbrush (colors. bluevilet );

Path. strokethickness = 3;

Main. Children. Add (PATH );

# Endregion

 

# Region create method2

Path pp = New Path ();

Pp. Stroke = new solidcolorbrush (colors. Blue );

Pp. strokethickness = 3;

Streamgeometry geometry = new streamgeometry ();

Geometry. fillrule = fillrule. nonzero; // F1.

Using (streamgeometrycontext CTX = geometry. open ())

{

CTX. beginfigure (new point (30, 60), true, true );

CTX. lineto (new point (150,600), true, false );

}

Geometry. Freeze ();

Pp. Data = geometry;

Main. Children. Add (PP );

# Endregion

 

# Region create method3

Path PP3 = New Path ();

// Pp3.data

Pp3.stroke = new solidcolorbrush (colors. Red );

Pp3.strokethickness = 3;

Geometryconverter GC = new geometryconverter ();

Pp3.data = (geometry) GC. convertfromstring ("m 500,100 ");

Main. Children. Add (PP3 );

# Endregion

Cubic beser Curve

Cubic besell curve command

Use two specified control points (controlpoint1 and controlpoint2) to create a cubic besell curve between the current point and the specified end point.

M 40,300 C 560,40 300,430 750,400

P0, P1, P2, and P3 point on a plane or in a three-dimensional space, a cubic besell curve is defined. The curve starts from p0 to P1 and starts from p2 to P3. It generally does not pass through P1 or P2;

These two points only provide direction information. The spacing between P0 and P1 determines the length of the curve to P2 before it is redirected to P3.

<Path stroke = "bluevilet" strokethickness = "3">

<Path. Data>

<Pathgeometry>

<Pathfigure startpoint = "10, 10">

<Beziersegment point1 = "400,430" point2 = "700,300" point3 = "" issmoothjoin = "true"/>

</Pathfigure>

</Pathgeometry>

</Path. Data>

</Path>

<Path stroke = "red" strokethickness = "3" Data = "m 40,300 C 560,40 300,430 750,400"/>

The following line is a normal line, and the curve is the besell Curve

Cubic Bessert curve of bejiz Smoothing

Create a cubic besell curve between the current vertex and the specified endpoint. The first control point is assumed to be the reflection of the second control point of the previous command relative to the current point. If the previous command does not exist, or the previous command is not a cubic shell curve command or a smooth cubic shell curve command, it is assumed that the first control point is the current point. The second control point is the control point of the curve terminal, which is specified by controlpoint2. For example, <path stroke = "red" strokethickness = "3" Data = "m 40,300 s 560,40 300,430"/>

The following line is a normal line, and the curve is the besell Curve

 

 

Horizontal or vertical line

<Path data = "m 0,200 H 800" stroke = "Violet" strokethickness = "3"/>

<Path data = "m 400, 10 V" stroke = "Violet" strokethickness = "3"/>

Bizell Curve

Command for secondary besell Curve

Create a secondary besell curve between the current point and the specified end point by using the specified control point. Q 100,200 300,200 is an example of a valid quadratic besell curve command.

<Path stroke = "bluevilet" strokethickness = "3">

<Path. Data>

<Pathgeometry>

<Pathfigure startpoint = "10, 10">

<Quadraticbeziersegment point1 = "400,430" point2 = "" issmoothjoin = "true"/>

</Pathfigure>

</Pathgeometry>

 

</Path. Data>

</Path>

<Path stroke = "red" strokethickness = "3" Data = "m 40,300 Q 260,140 300,430"/>

Smooth quadratic besell Curve

Command for smoothing the secondary besell Curve

Create a secondary besell curve between the current vertex and the specified endpoint. The control point is assumed to be the reflection of the control point of the previous command relative to the current point. If the previous command does not exist, or the previous command is not a quadratic besell curve command or a smoothing quadratic besell curve command, the control point is the current point.

<Path stroke = "red" strokethickness = "3" Data = "m 40,300 t 260,140 300,430"/>

 

Elliptical Arc

The elliptical arc command creates an elliptical arc between the current point and the specified end point.

<Path stroke = "black" strokethickness = "3" horizontalalignment = "center">

<Path. Data>

<Pathgeometry>

<Pathfigure>

<Pathfigure. segments>

<Arcsegment point = "400,300" rotationangle = "180"

Size = "10">

</Arcsegment>

</Pathfigure. segments>

</Pathfigure>

</Pathgeometry>

</Path. Data>

</Path>

One or more cubic besell Curves

Polybeziersegment

Use the pathfigure object to store the polybeziersegment object and other line segments.

 

A Cubic beiser curve is defined by four points: a start point, an end point, and two control points. Polybeziersegment specifies one or more cubic besell curves by setting the points attribute to a point set. For each of the three points in the Set, the first point and the second point specify the two control points of the curve, and the third point specify the end point. Note that the starting point of the curve is not specified because the starting point of the curve is the same as the ending point of the last line segment. If you want to specify all three vertices (a sel curve), you can use beziersegment to specify the values of these three vertices as point1, point2, and point3.

 

The two control points of the cubic beiser curve act like a magnet, attracting the part that is supposed to be a straight line in its own direction, thus forming a curve. The first control point affects the start part of the curve; the second control point affects the end part of the curve. Note that curves do not necessarily pass through one of the two control points. Each control point moves a part of a straight line in its own direction, but does not pass through itself.

 

In essence, polybeziersegment can have unlimited control points. The values of these points and endpoints are provided as the value of the points attribute.

<Path stroke = "red" strokethickness = "3">

<Path. Data>

<Pathgeometry>

<Pathfigure startpoint = "10, 20">

<Polybeziersegment points = "300,100, 0 600,100, 0"/>

</Pathfigure>

</Pathgeometry>

</Path. Data>

</Path>

 

 

Represents a series of secondary besels.

Polyquadraticbeziersegment

Represents a series of secondary besels.

A quadraticbeziersegment object can have a control point and an end point. A polyquadraticbeziersegment object can have an infinite number of control points. The values of these points and endpoints are provided as the points attribute values. Points are obtained from points string analysis.

<Path stroke = "black" strokethickness = "3">

<Path. Data>

<Pathgeometry>

<Pathfigure>

<Polyquadraticbeziersegment points = "200,200 300,100 0,200 30,400"/>

</Pathfigure>

</Pathgeometry>

</Path. Data>

</Path>

 

Finally, it's over. I'm not good at mathematics, and I have a big head.