WPF series: drawing, wpf series drawing

WPF series: drawing, wpf series drawing
Line

Draw a straight line between two coordinate points and set its start and end with four attributes.

 <Line Stroke="Blue" StrokeThickness="3" X1="20" Y1="20" X2="300" Y2="20"></Line>

If the line is drawn in the Canvas, the Top and Left attributes of the Canvas are valid.

  <Line Name="a" Stroke="Orange" X1="20" Y1="20" X2="120" Y2="100"></Line>  <Line Name="b" Stroke="Orange" X1="20" Y1="20" X2="120" Y2="100"Canvas.Left="15" Canvas.Top="50"></Line>

Polyline

Line breaks are similar to straight lines, except that multiple straight lines are connected together. They place the coordinates of all turning Points in the Points attribute, and separate the coordinate Points with spaces, space can also be used between the X axis and the Y axis. It is best to use the "," symbol for readability. You can also connect the two ends to form a graph.

  <Polyline Stroke="Green" StrokeThickness="3" 
  Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155"></Polyline>

<Polyline Stroke="Green" StrokeThickness="3" 
Fill="Yellow" Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155 5,100"></Polyline>

Polygon

Polygon can be used to draw Polygon, similar to Polyline, but it can automatically connect the last point and the starting point without adding the starting point at the end of the Points attribute like Polyline

 <Polygon Stroke="Green" StrokeThickness="3" Fill="Yellow" 
Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155"></Polygon>

Rectangle

Draw a rectangle and specify the Width and Height of the rectangle through the Width and Height attributes.

<Rectangle Canvas.Left="50" Canvas.Top="30" Width="200" Height="100" Fill="Aqua"></Rectangle>

Ellipse

Ellipse is used to draw a circle and an Ellipse. It also uses the Width and Height attributes to change the shape of the circle.

 <Ellipse Fill="Beige" Width="100" Height="100"></Ellipse> <Ellipse Canvas.Left="130" Fill="BlueViolet" Width="200" Height="100"></Ellipse>

Path

Draw a series of curves and straight lines, for example, draw a curve through it; in the Data attribute, M defines the starting point of the line (20, 20), Q specifies the secondary besell Curve Control Point (100,100) and endpoints)

 <Path Stroke="BurlyWood" StrokeThickness="5" Data="M 20 20 Q 100,100 200,20"></Path>

The following are common special characters in Data,

M indicates the start point.
Z closed graph
L line to the specified point
H horizontal line, V vertical line
Q: quadratic besell curve, T-smooth quadratic besell Curve
C cubic besell curve, S smooth cubic besell Curve
A Elliptical Arc

   <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="110" Canvas.Left="230" >       <Path.Data>           <GeometryGroup>               <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>               <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry>           </GeometryGroup>       </Path.Data>   </Path>   <Path Canvas.Left="10" Canvas.Top="20" Fill="Yellow" Stroke="Blue" StrokeThickness="2.5"
 Data="M120,5 L128,80 L220,50 L160,130 C200,280 100,50 70,260 L60,140 L0,110 L70,80 Z" StrokeLineJoin="Round"></Path>