WPF draws simple commonly used Path, wpfpath

WPF draws simple commonly used Path, wpfpath

When writing code, we often need to use some simple but not regular graphics paths, but limited to the art skills, we do not know how to draw

Below I will tell you some simple tips to use code to draw a Path. individuals prefer to use code because numerical control is more refined.

 

MSDN tells us that Path can be drawn using these shapes:

The ArcSegment class represents an elliptical arc between two points.

The BezierSegment class indicates a cubic besell curve drawn between two points.

The LineSegment class creates a straight line between two points in PathFigure.

The PolyBezierSegment class represents one or more cubic besels.

The PolyLineSegment class indicates a collection of line segments defined by PointCollection. Each Point specifies the end Point of a line segment.

The PolyQuadraticBezierSegment class represents a series of secondary besels.

The QuadraticBezierSegment class creates a secondary besell curve between two points in PathFigure.

 

It's complicated to say so much. We can use it the simplest way:

LineSegment draws a straight line, PolyLineSegment draws a line, and ArcSegment draws an arc

In fact, with these three classes, we can draw a vast majority of simple and commonly used shapes. The following are two examples:

 

 

The width and height of this shape are both 100. The width of the rectangle is 100 and the height is 90. The width of the triangle is 10 and the height is 10.

For such an image with edges and corners, we only need to find all its vertices.

 

Then connect them clockwise and use the PolyLineSegment line to represent it.

1 <Path Stroke = "Red" StrokeThickness = "1"> 2 <Path. data> 3 <PathGeometry> 4 <PathFigure StartPoint = "50,100"> 5 <PolyLineSegment Points = ", 0, 90, 90, 90, 0, 0"> </PolyLineSegment> 6 </PathFigure> 7 </PathGeometry> 8 </Path. data> 9 </Path>View Code

 

The radius of the four arcs is 5, and other attributes are the same. we need to split it into eight parts, four arcs and four edges. Because of the relationship between the arcs in the upper left corner, the starting point is set to (5, 0), the starting point of each part, are the endpoints of the previous part:

1 <Path Stroke = "Red" StrokeThickness = "1"> 2 <Path. data> 3 <PathGeometry> 4 <PathFigure StartPoint = "5, 0"> 5 <LineSegment Point = "95,0"> </LineSegment> 6 <! -- SweepDirection: gets or sets a value that specifies whether to draw an arc in the Clockwise or Counterclockwise direction --> 7 <! -- Try another value, you can see what's going on. --> 8 <ArcSegment Point = "" Size = "5, 5" SweepDirection = "Clockwise"> </ArcSegment> 9 <LineSegment Point = ", 85 "> </LineSegment> 10 <ArcSegment Point =" 50,100 "Size =" "SweepDirection =" Clockwise "> </ArcSegment> 11 <PolyLineSegment Points =", 90"> </PolyLineSegment> 12 <ArcSegment Point = "" Size = "5, 5" SweepDirection = "Clockwise"> </ArcSegment> 13 <LineSegment Point = ""> </LineSegment> 14 <ArcSegment Point = "5, 0" Size = "5, 5" SweepDirection = "Clockwise"> </ArcSegment> 15 </PathFigure> 16 </PathGeometry> 17 </Path. data> 18 </Path>View Code