WPF geometry geometry

In the WPF DrawingContext object, the basic drawing ellipse and the rectangle's api:drawellipse and DrawRectangle are provided. However, these are far from sufficient, and we use the Drawgeometry function more often in our everyday applications, which can draw more complex geometries and provide many powerful and easy-to-use functions, in most scenarios, You can even replace the drawellipse and DrawRectangle functions.

In the WPF graphics architecture, the geometry class represents the base class for the geometry, and it is used to instantiate some of its subclasses, specifically:

Basic geometry

• Segment: LineGeometry
• Rectangle: RectangleGeometry
• Ellipse: EllipseGeometry

Geometry collection

The path collection graph PathGeometry can contain a series of geometry collections, which are common:

• Segment: LineSegment
• Arc: ArcSegment

Bezier Curve: The Bezier series is also more, the following are several specific:

1. BezierSegment: Creates a three-cubic Bezier curve between two points.
2. PolyBezierSegment: Creates a series of three-cubic Bezier curves.
3. PolyQuadraticBezierSegment: Creates a series of two Bezier curves.
4. QuadraticBezierSegment: Creates a two-time Bezier curve.

In addition to this combination of methods, the system provides a streamgeometry that is drawn through a series of APIs. It does not support bindings, animations, and is more flexible and efficient.

StreamGeometry geometry = new StreamGeometry;

using (Streamgeometrycontext CTX = geometry. Open ())
{
CTx. BeginFigure (new Point (), true, true);
CTx. LineTo (new Point (), true, false);
CTx. LineTo (new Point (+), true, false);
}

Composite geometry

You can create a composite geometry object by using GeometryGroup, Combinedgeometry, or Combine by calling the static Geometry method. The main differences are:

• Combinedgeometry the sub-graph, the child shape with no area will be discarded. You can combine only two sub-shapes (but these two sub-shapes can also be composite geometries).
• The GeometryGroup is only combined without an area overlay. You can add multiple sub-shapes. For an example, see how to: Create a composite shape.

Combinedgeometry are stacked in four ways: Union, Intersect, Exclude, and Xor, with the following effects:

These are very useful in our everyday applications, see the MSDN article: How to: Create a composite shape and how to: Create a combined geometry.

Common methods

The Geometry object itself also contains a series of very useful methods, such as:

• Getarea-Gets the area of the Geometry.
• FillContains-Determines if additional Geometry are included.
• Strokecontains-Determines whether the specified point is included.
• Bounds: Getting an external rectangle

These are very common methods, such as Fillcontains,strokecontains for mouse hit testing is very convenient.

Rendering method

Geometry objects cannot be rendered independently as images, which are generally presented in the following ways:

Render in Path:

Can be rendered as a path object as a geometrydrawing.geometry parameter

    <path stroke= "Black" strokethickness= "1" >        <Path.Data>            <linegeometry startpoint= "10,20" endpoint= "100,130"/>        </Path.Data>    </Path>

It's OK to write some simple geometry in this way, but it's a bit cumbersome for pathgeometry, so XAML uses a simple path-marking syntax to simplify this process.

    <path stroke= "Black" fill= "Gray" >        <Path.Data>            <pathgeometry figures= "M 10,100 C 10,300 300,- 300,100 "/>        </Path.Data>    </Path>

Can even be directly simplified to:

    <path stroke= "Black" fill= "Gray" data= "M 10,100 C 10,300 300,-200 300,100"/>

This syntax is very common in some third-party vectors converted to files, and if you can master it, it is very convenient to write some simple geometric figures.

Present in the DrawingContext

Can be used as drawingcontext. Drawgeometry parameter rendering, this way later in the article will be more explanation, here is not more introduction.

Present in the GeometryDrawing

Can be rendered as a drawing object as a geometrydrawing.geometry parameter

    <geometrydrawing brush= "MediumBlue" >        <GeometryDrawing.Geometry>            <GeometryGroup>                <ellipsegeometry radiusx= "radiusy=" "center=" 50,50 "/>                <ellipsegeometry radiusx=" "RadiusY=" 20 " center= "50,50"/>            </GeometryGroup>        </GeometryDrawing.Geometry>    </geometrydrawing >

Of course, drawing objects cannot be rendered independently, and are generally used as DrawingBrush or as drawingcontext.drawdrawing parameters.

Other uses:

Cropping a control as a uielement.clip parameter

    <image source= "Sampleimages\waterlilies.jpg" width= "$" height= "all" horizontalalignment= "left" >        < image.clip>            <ellipsegeometry radiusx= "radiusy=" center= "100,75"/>        </Image.Clip>    </Image>

　　

In addition, images are often cropped in drawinggroup.clipgeometry and Drawingcontext.pushclip.

As Doubleanimationusingpath. PathGeometry Property Generation Path Animation

The path of the object can be rotated (rotated) by the geometry path defined by the PathGeometry object.

PathGeometry usage

look at the effect first:

(Figure 1)

XAML (Code a) :
<page xmlns= Http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns:x=" http://schemas.microsoft.com/winfx/2006/ XAML "
  <canvas>

<!--This is the notation for using pathfigurecollection -->
< Path  stroke= "Black" strokethickness= "1" fill= "#CCCCFF";
   < Path.data>
    <pathgeometry figures= "m 10,100 C 10,300 300,- 300,100 "/>
  </path.data>
< /path ;

<!-- This is the notation for using streamgeometry -->
<path  stroke= "Black" &NBSP; Data= "m 100,240 C 510,300 80,100 300,160 H40 v80 "/>
</canvas
</page>

  Please take note of the bold and red text section above.

WPF provides two classes to describe path data: One is streamgeometry and the other is pathfigurecollection.

Similar to: <path stroke= "Black" data= "M 100,240 C 510,300 80,100300,160 H40 v80"/> In the form of a streamgeometry XAML code representation , and it is the most concise form of representation.
and 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 is done in a way that uses the XAML code representation of PathFigureCollection .

Both of these methods can achieve the same display effect, so when to use StreamGeometry, when to use the PathFigureCollection way?
In general, when you create a path, you no longer need to modify, you can use the StreamGeometry method, if you also need to modify the path value, then use the PathFigureCollection method (this is pathgeometry).

:
(1) streamgeometry mode: 
Note:
(1) The above syntax, [ ...] Represents optional, * represents any one.
(2) "Fill Rules", there are evenodd and nonzero two kinds. For brevity in XAML, use " F0" to represent evenodd, " F1 "represents nonzero.
(3) The syntax for "shape description": Movecommand drawcommands [Closecommand]
Where: Move instruction (Movecommand), Draw instruction (drawcommands), Close command (Closecommand).
(4) movecommand Specifies the starting point, using a drawingcommand description describing the outline, Closecommand is used to close the path.

such as:

(Figure 2)

below to explain "M 100,240 c510,300 80,100 300,160 H40 v80 "The meaning of this string. The
is divided into four cases:
1.  move command: move command (m): M start point   or: M start point
For example: M 100,240 or M 100,240
When using uppercase M, the absolute value is expressed; When using lowercase m; Represents a value relative to the previous point, which is used if the previous point is not specified (0,0).

2.&NBSP; Draw Command (Draw command):
We can draw the following shapes:
(1) Line: Lines (L)
(2) Horizontal straight: Horizontal line (H)
(3) Vertical line: Vertical lines (V)
(4) Three-time equation Bezier: Cubic Bézier curve (C)
(5) Two-time equation Bezier curve: Quadra Tic Bézier curve (Q)
(6) Smoothing three-time equation Bezier curve: Smooth cubic Bézier curve (S)
(7) Smoothing two-time equation Bezier: Smooth quadratic Bézier curve (T )
(8) Oval Arc: Elliptical arc (A)  

The English letter in parentheses after each shape above is the uppercase form of the command shorthand, but you can also use lowercase. The difference between uppercase and lowercase is that uppercase is an absolute value, and lowercase is relative.

For example: L, 300,400 represents a straight line from an absolute coordinate point (100,200) to another absolute coordinate point (300,400). and L 300,400, the relative last point (if not specified, the default is (0,0) coordinate point) begins to calculate the coordinate point (100,200) to a coordinate point of (300,400) a line.

When we re-use the same type, we can omit the previous command. For example: L, 300,400 L: L 100, 200 300,400.

Is the following XAML code drawing effect (for your convenience, I added a background check for 10 pixels per small):
XAML (Code B):
<path stroke= "Black" strokethickness= "1" data= "m 10,100 L 100,100 100,50 z m 10,10 100,10 100,40 z"/ >

(Fig. 3)

The attentive reader may find it a bit strange to feel, because I deliberately put the following triangle code in front of it, so that it does not seem to fit the habit. In fact, the above code is exactly the same as the result:
<path stroke= "Black" strokethickness= "1" data= "m 10,10 100,10 100,40 z M 10,100 L 100,100 100,50 z" />
Here's a Z command you haven't seen for the moment, it's a close command, which means enclosing the specified shape and connecting the end and end points together to form a closed area.

Draw instruction Format syntax:

(1) Lines: line (L)
Format:l end point coordinate or: l end point coordinate.
For example: L 100,100 or L 100 100. The coordinate values can be in the form of X, Y (separated by commas in the middle) or × y (separated by a half-width space in the middle).

(2) Horizontal horizontal line (H): Draws a line from the current point to the specified x-coordinate.
format: H x Value or H x value (x is a value of type System.Double)
For example: H 100 or H 100, can also be: H 100.00 or H 100.00 and other forms.

(3) Vertical linear Vertical Line (V): Draws a line from the current point to the specified y-coordinate.
format: V y value or v y value (Y is a value of type System.Double)
For example: v 100 or Y 100, can also be: v 100.00 or v 100.00 and other forms.

(4) Three-time equation Bezier Cubic Bezier curve (C): Draws a three-time equation Bezier curve between the current point and the specified end point by specifying two control points.
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 or C 100,200 200,400 300,200
Where the point (100,200) is the first control point, the Point (200,400) is the second control point, and the point (300,200) is the end point.

(5) Two-time equation Bezier quadratic Bezier curve (Q): Draws a two-time equation Bezier curve from the current point to the specified end point by a specified control point.
format: Q Control point end points or Q control point end points
For example: Q 100,200 300,200. Where the point (100,200) is the control point, and the point (300,200) is the end point.

(6) smoothing three equation Bezier curves: Smooth cubic Bézier curve (S): smooth control of Bezier curves at the current point to a specified point by a specified point.
format: s control point end point or S control point end point
For example: S 100,200 200,300

(7) Smoothing two-time equation Bezier smooth quadratic Bézier curve (T):Similar to smoothing the three-second equation Bezier curve.
format:T control point end point or T control point end point
For example: T 100,200 200,300

A comparison of the Bezier curve of the smoothed three-times equation with the first (7) smoothing of the two-quadratic equation:

Such as:

XAML Code:
<!--This is the code of the left smoothing three-time equation Bezier curve--
<path stroke= "Black" strokethickness= "1" data= "M 150,10S 250,100 80,280"/>

<!--This is the key point.
<path stroke= "Black" strokethickness= "1" data= "M 150,10 L 250,100 80,280"/>

<!--This is the code of the right smoothing two-time equation Bezier curve--
<path stroke= "Red" strokethickness= "2" strokedasharray= "1,1,1" data= "M 150,10 T 250,100 80,280"/>
Note: For the sake of comparison, I used the same control point, the coordinates are: (250,100), the starting and ending points are the same. In addition, I used a dashed line (with the Strokedasharray attribute) and different colors to differentiate.

(8) Elliptical Arc: Elliptical arc (A): draws an arc between the current point and the specified end point.
A dimension arc rotation angle Value Advantage arc mark positive and negative angle mark end point
Or:
A dimension arc rotation angle Value Advantage arc mark positive and negative angle mark end point
Size: System.Windows.Size type that specifies the radius value in the X, y direction of the ellipse arc.
Rotation angle (RotationAngle): system.double type.
Arc Rotation angle Value (rotationangle): The rotation angle value of an elliptical arc.
The mark of the dominant arc (Islargearcflag): Whether it is a dominant arc, if the angle of the arc is greater than or equal to 180 degrees, then set to 1, otherwise 0.
Positive and negative angle marker (Sweepdirectionflag): set to 1 when the positive angle direction is drawn, otherwise 0.
End point (endPoint): System.Windows.Point type.

3. Close command: Used to connect the first and last points of the graph in a straight line to form a closed area.
denoted by z or Z.

If you know something about SVG, you'll find that they are surprisingly similar.

WPF geometry geometry