Windows Phone development (32): pathgeometry in the path

Speaking of path, it actually refers to the path class, which is hidden in the namespace system. windows. in shapes, it should be easy to find. It has a very important attribute data. You may wish to capture it in "Object Browser" to see if this attribute is system. windows. media. for more information about the geometry type, this geometry class is an abstract class because it is too abstract to be instantiated.

Then, let's see what Derived classes it has?

1. ellipsegeometry: what is the shape of a ry? Circle or elliptic.

2. linegeometry.

3. rectanglegeometry: this is also a two-dimensional rectangle.

4. pathgeometry: This is a complicated path. It can be a complex path consisting of an arc, curve, straight line, an ellipse, and a rectangle.

5. geometrygroup: if the above ry cannot meet your greedy needs, you may try this. It can combine the above ry into a ry.

 

People usually like to explain the problem from easy to difficult. Why don't we try to learn from hard to easy today?

Among the figures listed above, when the number of pathgeometry is the most complex, we can open it, okay? As long as you have done it, you can actually learn it.

First, let's take a look at the structure of pathgeometry. It contains a figures set, and each element in the set is a pathfigure object. Next, split it down. The pathfigure class also has a set attribute segments. Each element in the set is a pathsegment object. But we can see from the "Object Browser" That pathsegment is an abstract class, so we need to continue to find its derived class.

Shows the derivation of the pathsegment class:

Next, let's demonstrate their usage one by one.

 

I. arcsegment draw an arc

This class indicates a circle. The islargearc attribute indicates whether the arc is greater than 180 degrees. point indicates the end point of the arc, and size indicates the size of the Arc ...... In fact, these attributes do not need to be described one by one. If you are interested in them, you will find them. The following is an example.

<Grid> <br/> <path horizontalalignment = "stretch" <br/> verticalignment = "stretch" <br/> stroke = "{staticresource grbrush}" <br/> strokethickness = "12"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "325,190"> <br/> <arcsegment islargearc = "true" point = "365,410" size =" 100,200 "/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

 

Running Effect

 

 

Ii. Cubic besell Curve

The beziersegment class has two control points and one end point, as shown in the following example:

<Grid> <br/> <path horizontalalignment = "stretch" verticalignment = "stretch" strokethickness = "8" stroke = "{staticresource grbrush}"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "100,245"> <br/> <beziersegment point1 = "" point2 = "-" point3 = "300,450"/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Shows the running effect.

 

 

Line 3 linesegment

This is simpler.

<Grid> <br/> <path horizontalalignment = "stretch" verticalignment = "stretch" stroke = "{staticresource grbrush}" strokethickness = "8"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "120,245"> <br/> <linesegment point = ""/> <br/> <linesegment point = "370,385"/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Shows the running effect:

 

 

4. More complex three-step besell curve polybeziersegment

This guy is similar to the three betel curves mentioned above, but one or more pieces can be defined. Each three points in the points set determine a betel curve.

<Grid> <br/> <path horizontalalignment = "stretch" verticalignment = "stretch" strokethickness = "8" stroke = "{staticresource grbrush}"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "250,38"> <br/> <polybeziersegment. points> <br/> <point X = "16" Y = "75"/> <br/> <point X = "300" Y = "100"/> <br /> <point X = "92" Y = "134"/> <br/> <point X = "45" Y = "200"/> <br/> <point X = "23" Y = "280"/> <br/> <point X = "358" Y = "460"/> <br/> </polybeziersegment. points> <br/> </polybeziersegment> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Running effect.

 

 

5. polylinesegment

Different from the preceding line, it can contain multiple lines.

<Grid> <br/> <path horizontalalignment = "stretch" verticalignment = "stretch" strokethickness = "8" stroke = "{staticresource grbrush}"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "111,32"> <br/> <linesegment point = "79,133"/> <br/> <linesegment point = "122,298"/> <br/> <linesegment point = "365,277"/> <br/> <linesegment point = "22,399"/> <br/> <linesegment point = "380,458"/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Shows the running effect.

 

 

 

6. Compound secondary betel curve polyquadraticbeziersegment

The composite curve can contain one or more quadratic besell curves. Since the quadratic besell curve has only one control point and an endpoint, points determines a curve for each of the two points.

<Grid> <br/> <path verticalignment = "stretch" horizontalalignment = "stretch" strokethickness = "8" stroke = "{staticresource grbrush}"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "96,111"> <br/> <polyquadraticbeziersegment points = "220,250 137,60 330,420"/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Shows the running effect.

 

 

 

7. Two points determine a quadratic betel curve quadraticbeziersegment

This is a better understanding than the above one.

<Grid> <br/> <path horizontalalignment = "stretch" verticalignment = "stretch" strokethickness = "8" stroke = "{staticresource grbrush}"> <br/> <path. DATA> <br/> <pathgeometry> <br/> <pathfigure startpoint = "10,300"> <br/> <quadraticbeziersegment point1 = "385,435" point2 = ""/> <br/> </pathfigure> <br/> </pathgeometry> <br/> </path. DATA> <br/> </path> <br/> </GRID> <br/>

Shows the running effect.