GRAPHICS in Visual Basic .NET

Encode QR Code in Visual Basic .NET GRAPHICS

Gets or sets the x radius of the ellipse used for rounding the rectangle s corners. Gets or sets the y radius of the ellipse used for rounding the rectangle s corners. Gets or sets the rectangle s dimensions. The Rect class has x, y origin point and width, height dimensions properties, each of type double.

Let s draw a rectangle on the screen again using the Path class: <Path Stroke="Red" StrokeThickness="5"> <Path.Data> <RectangleGeometry Rect="10,10,40,40" RadiusX="5" RadiusY="5"/> </Path.Data> </Path>

The EllipseGeometry class represents an ellipse defined by a center point and two radii, one for the top and bottom of the ellipse and the other for the sides. Its properties are shown in Table 9-3. Table 9-3. Properties of the System.Windows.Media.EllipseGeometry Class

Gets or sets the x radius of the ellipse used for defining the ellipse s sides. Gets or sets the y radius of the ellipse used for defining the ellipse s top and bottom. Gets or sets the center point (x, y coordinates) of the ellipse.

Yet again, we use the Path class to display EllipseGeometry on the screen: <Path Stroke="Red" StrokeThickness="5"> <Path.Data> <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="20"/> </Path.Data> </Path>

The PathGeometry class, inherited from the Geometry class, is where the geometries get interesting. The PathGeometry class is used to represent an arbitrary geometrical shape made up of lines and/or curves. PathGeometry contains one or more PathFigure objects. Each PathFigure object contains one or more PathSegment objects. The various segments are connected automatically within each PathFigure object by each segment s start point, starting at the previous segment s endpoint. There are seven segment classes you can use to construct figures, as shown in Table 9-4. Since using these segments to construct geometrical shapes can be unwieldy, there is a special syntax used with the Path class for drawing multiple segments. We ll take a closer look at this in the next section when we look at the various Shaperelated classes. Table 9-4. Segment Classes Derived from PathSegment Used in a PathFigure

ArcSegment BezierSegment LineSegment PolyBezierSegment PolyLineSegment PolyQuadraticBezierSegment QuadraticBezierSegment

Elliptical arc between two points Cubic Bezier curve between two points Straight line between two points Represents a series of cubic Bezier curves Represents a series of lines Represents a series of quadratic Bezier curves Quadratic Bezier curve between two points

Before we go over the specific properties of each segment, let s take a look at piecing together a rectangle. You can see what the rectangle looks like in Figure 9-3; its XAML code is also shown.

Caution If you use a StrokeThickness larger than 1, the final segment will leave a gap. Keep this in mind

when manually piecing together segments. The final segment might need an adjustment to go far enough to fill in the visual gap left by the difference between the endpoint and the stroke thickness.

<Path Stroke="Red" StrokeThickness="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,10"> <PathFigure.Segments> <LineSegment Point="10,40"/> <LineSegment Point="40,40"/> <LineSegment Point="40,10"/> <LineSegment Point="10,10"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> Let s take a look at what each segment describes and its properties briefly here, and later we will discuss the Bezier curve in detail in the context of implementing animation.

This segment draws an elliptical segment between the end of the previous segment (or the figure s start point) and the specified destination point. Since the elliptical segment only has two points, there must be a way to define how the arc is drawn since there are multiple candidate arcs. The IsLargeArc and SweepDirection properties exist for this purpose. Table 9-5 shows the properties of ArcSegment. Table 9-5. Properties of the System.Windows.Media.ArcSegment Class

If true, the arc drawn is greater than 180 degrees. This is one of the two properties required to define how the arc is drawn. This defines the endpoint of the arc. This specifies the rotation angle (in degrees) of the arc around the x axis. It defaults to 0. This specifies the x and y radii of the arc. This defines which direction the arc is drawn in. It can be set to Clockwise or Counterclockwise. The use of this property with IsLargeArc fully specifies the type of arc drawn.