WPF series Path syntax (Data Attribute Syntax of Path), wpfpath

WPF series Path syntax (Data Attribute Syntax of Path), wpfpath
Example:

XAML(Code):
<Page xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<! -- This is usedPathFigureCollection-->
<PathStroke = "Black" StrokeThickness = "1" Fill = "# CCCCFF">
<Path. Data>
<PathGeometry Figures = "M 10,100 C 10,300 300,-160 300,100"/>
</Path. Data>
</Path>
<! -- This is usedStreamGeometry-->
<PathStroke = "Black"Data = "M 100,240 C 510,300 80,100 300,160 H40 v80"/>
</Canvas>
</Page>
Note the bold text section above.

WPF provides two classes to describe path data: StreamGeometry and PathFigureCollection.
For example, the <Path Stroke = "Black" Data = "M 100,240 C 510,300 80,100 300,160 H40 v80"/> format is The XAML code representation of StreamGeometry and the most concise representation.
Similar:
<Path Stroke = "Black" StrokeThickness = "1" Fill = "# CCCCFF">
<Path. Data>
<PathGeometry Figures = "M 10,100 C 10,300 300,-160 300,100"/>
</Path. Data>
</Path>
This method is usedPathFigureCollection.

Both methods can achieve the same display effect. When will StreamGeometry be used and when will PathFigureCollection be used?
Generally, when you create a path and do not need to modify it, you can use the StreamGeometry method. If you need to modify the PATH value, use the PathFigureCollection method (PathGeometry here ).

Syntax

Data Attribute Syntax:
(1) StreamGeometry mode: [fill rule] shape description [shape description] *
(2) PathFigureCollection: shape description [shape description] *
Note:
(1) In the above syntax, [...] indicates optional, * indicates any.
(2) "fill rule" contains two types: EvenOdd and Nonzero. In XAML, "F0" is used to represent EvenOdd, and "F1" is Nonzero.
(3) syntax of "shape description": moveCommand drawCommands [closeCommand]
Among them: moveCommand, drawCommands, and closeCommand ).
(4) moveCommand specifies the starting point. A drawingCommand is used to describe the content of the contour. closeCommand is used to close the path.

 

For example:

The following describes the meaning of a string such as "M 100,240 C510, 300 80,100 300,160 H40 v80.
There are three types to explain:

Move command

1.Move command:Move Command (M): M start point or: m start point
For example, M 100,240 or m 100,240
When uppercase M is used, it indicates the absolute value; When lowercase m is used; it indicates the value relative to the previous one. If the previous one is not specified, it is used (0, 0 ).

Draw command

2.Draw command(Draw Command ):
We can draw the following shape:
(1) Straight Line: Line (L)
(2) Horizontal line: Horizontal line (H)
(3) Vertical line: Vertical line (V)
(4) Cubic equation besell curve: Cubic bezr curve (C)
(5) Quadratic equation: Quadratic bezr curve (Q)
(6) smoothing cubic equation (besell) curve: Smooth cubic bezr curve (S)
(7) smoothing quadratic equation: smooth quadratic bezr curve (T)
(8) elliptical Arc: elliptical Arc ()
The English letters enclosed in parentheses in each of the above shapes are abbreviated to uppercase, but you can also use lowercase letters. The difference between uppercase and lowercase is that uppercase is the absolute value and lowercase is the relative value.
For example, L 100,200 L 300,400 represents a straight line from absolute coordinate point (100,200) to another absolute coordinate point (300,400. L 100,200 l 300,400 indicates the coordinate point (100,200) to the coordinate point (300,400) calculated from (0, 0).
When we reuse the same type, we can omit the previous command. For example, the abbreviation of L 100,200 L 300,400 is L 100,200 300,400.

 

Example:

Path Stroke = "Black" StrokeThickness = "1" Data ="M 10, 10, 10, 40 ZM 10,100 L 100,100 100,50 Z "/>
Here is a Z Command that you haven't seen yet. It is a close Command, which indicates to close the specified shape and connect the first and last points to form a closed area.

Syntax for Drawing Instruction format:

(1) Straight Line: Line (L)
Format:L end point coordinate or: l end point coordinate.
For example, L 100,100 or l 100 100. Coordinate values can be in the form of x, y (separated by commas in the middle) or x y (separated by spaces in the middle.

(2) Horizontal line (H): Draw a straight line from the current point to the specified x coordinate.
Format:H x value or h x value (x is a value of the System. Double type)
For example, H 100 or h 100 can also be in the form of H 100.00 or h 100.00.

(3) Vertical line (V): Draw a straight line from the current point to the specified y coordinate.
Format:V y value or v y value (y is a value of the System. Double type)
For example, V 100 or y 100, or V 100.00 or v 100.00.

(4) Cubic equation (C): You can specify two control points to draw the three-way besell curve between the current point and the specified end point.
Format:C first control point second Control Point End Point or c first control point second Control Point End Point
For example, C 100,200 200,400 300,200 100,200 or c 200,400 300,200
Where, point (100,200) is the first control point, point (200,400) is the second control point, and point (300,200) is the end point.

(5) Quadratic equation (Q): Draws a quadratic equation besell curve between the current point and the specified end point by specifying a control point.
Format:Q Control Point End Point or q Control Point End Point
For example, q 100,200 300,200. Where, point (100,200) is the control point, and point (300,200) is the end point.

(6) smoothing cubic equation besell curve: Smooth cubic bezr curve (S ):You can use a specified vertex to "smoothly" control the beiser curve from the current vertex to the specified vertex.
Format:S control point end point or s Control Point End Point
For example, S 100,200 200,300

(7) smoothing quadratic equation (T ):This is similar to smoothing the cubic equation's besell curve.
Format:T control point end point or t Control Point End Point
For example, T 100,200 200,300

(8) elliptical Arc: elliptical Arc ():Draw an arc between the current point and the specified end point.
A dimension arc rotation angle value the positive and negative angles of the dominant arc mark the end point
Or:
A dimension arc rotation angle value the positive and negative angles of the dominant arc mark the end point
Size: System. Windows. Size type, which specifies the radius value of the elliptical arc X and Y.
Rotation Angle: System. Double type.
Arc rotation angle: the Rotation Angle of an elliptical arc.
IsLargeArcFlag: indicates whether the arc is an active arc. If the angle of the arc is greater than or equal to 180 degrees, it is set to 1. Otherwise, it is 0.
Sweepdireflaflag: this parameter is set to 1 when the positive direction is drawn; otherwise, it is 0.
EndPoint: System. Windows. Point type.

 

Close command

3.Disable command(Close Command): used to connect the first and last points of a graph in a straight line to form a closed area.
In Z or z format.

 

Comparison

Comparison between the besell curve of the smoothing cubic equation (6) and that of the smoothing quadratic equation (7:

XAML code:
<! -- This is the code for smoothing the besell curve of the cubic equation on the left -->
<Path Stroke = "Black" StrokeThickness = "1" Data = "M 150,10S 250,100 80,280"/>
<! -- This is the line indicating the key point -->
<Path Stroke = "Black" StrokeThickness = "1" Data = "M 150,10 L 250,100 80,280"/>
<! -- This is the code for smoothing the besell curve of the quadratic equation on the right -->
<Path Stroke = "Red" StrokeThickness = "2" StrokeDashArray = ", 1" Data = "M, 10T 250,100 80,280"/>
NOTE: For the convenience of comparison, I use the same control point. The coordinates are: (250,100), and the start and end points are the same. In addition, I used dotted lines (with the StrokeDashArray attribute) and different colors to differentiate them.