Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Geometry class

Geometry class

The Geometry class contains various geometric shapes. Not directly, but can be accessed through its descendants.

Geometries:

  1. LineGeometry

<LineGeometry StartPoint="20,50" EndPoint="200,50" />

  1. RectangleGeometry

<RectangleGeometry Rect="80,167 150 30"/>

  1. EllipseGeometry

<EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

  1. GroupGeometry

  2. PathGeometry

  3. CombinedGeometry

  4. StreamGeometry

The first three have been mentioned before, it is clear on the basis of foregoing studies.

Path

WPF has a class called Path to product composite drawings and curves. Curves construction cannot be compared to the former one, actually it can be created by a series of commands. The producing of these commands is not an easy way by hand, so it can be generated with the Microsoft software called Expression Design. (Chapter XVIII.3)

PathGeometry

The PathGeometry class is considered one of the strongest classes in geometry. You can build up one or more PathFigure object within a PathGeometry object. A PathFigure (curve element) is actually a set of continuous lines and curves can be closed (IsClosed – completion of items) or open depending on that the final and the starting point of the shape are connected with each other or not.

PathGeometry syntax:

        <Path>

            <Path.Data>

                <PathGeometry>

                    <PathFigure>

                        <ArcSegment />

                        <BezierSegment />

                        <LineSegment />

                        <PolyBezierSegment />

                        <PolyLineSegment />

                        <PolyQuadraticBezierSegment />

                        <QuadraticBezierSegment />

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

Line segments:

  1. ArcSegment,

  2. BezierSegment,

  3. LineSegment,

  4. PolyBezierSegment,

  5. PolyLineSegment,

  6. PolyQuadraticBezierSegment,

  7. QuadraticBezierSegment.

Example VII.5 Speaker

VII.5. Speaker

        <Path Fill="Peru"

              Stroke="Yellow" StrokeThickness="10"

              StrokeLineJoin="Round">

            <Path.Data>

                <PathGeometry>

                    <PathFigure StartPoint="120,75"

                                IsClosed="True">

                        <LineSegment

                            Point="10,80" />

                        <PolyLineSegment

                            Points="10,160 120,170 170,220" />

                        <ArcSegment

                            Point="170,20"

                            Size="10,30" />

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

        <Path Fill="Gray"

              Stroke="Plum" StrokeThickness="5"

              StrokeLineJoin="Round">

                    <Path.Data>

                            <PathGeometry>

                    <PathFigure StartPoint="210,200" IsClosed="True">

                        <LineSegment Point="230,240"/>

                        <LineSegment Point="250,200"/>

                    </PathFigure>

                    <PathFigure StartPoint="225,120" IsClosed="True">

                        <LineSegment Point="260,150"/>

                        <LineSegment Point="260,90"/>

                    </PathFigure>

                    <PathFigure StartPoint="210,40" IsClosed="True">

                        <LineSegment Point="230,0"/>

                        <LineSegment Point="250,50"/>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

VII.6 Példa M letter

VII.6. M letter

<Path StrokeThickness="10">

  <Path.Stroke>

    <LinearGradientBrush>

       <GradientStop Offset="0.3" Color="Yellow"/>

       <GradientStop Offset="1" Color="Red"/>

       </LinearGradientBrush>

  </Path.Stroke>

  <Path.Data>

      <PathGeometry>

         <PathGeometry.Figures>

            <PathFigureCollection>

               <PathFigure StartPoint="10,280">

                   <PathFigure.Segments>

                      <PathSegmentCollection>

                       <QuadraticBezierSegment Point1="120,380" Point2="80,100" />

                       <QuadraticBezierSegment Point1="170,190" Point2="240,100"/>

                       <QuadraticBezierSegment Point1="200,380" Point2="320,280"/>

                      </PathSegmentCollection>

                    </PathFigure.Segments>

                </PathFigure>

              </PathFigureCollection>

         </PathGeometry.Figures>

     </PathGeometry>

  </Path.Data>

</Path>

GeometryGroup

We can create objects consist of a number of geometric shapes.

Example VII.7 Complex shapes 1

VII.7. Complex shapes 1

<Path Stroke="Green" StrokeThickness="6" Fill="Red">

          <Path.Data>

                <GeometryGroup>

                    <LineGeometry StartPoint="20,100" EndPoint="200,220" />

                    <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

                    <RectangleGeometry Rect="80,167 150 30"/>

                </GeometryGroup>

          </Path.Data>

</Path>

The FillRule feature of the GeometryGroup is attended to combine the parts of the shapes have been cut from each other, we can set it with Norzero value, defaults to EvenOdd.

VII.8 Példa Complex shapes2

VII.8. Complex shapes 2

<GeometryGroup FillRule="Nonzero">

StreamGeometry

Our shapes can be set in much more compact form in contrast with the above mentioned ones. The StreamGeometry is basically a mini-language.

Elements of Language:

Move

M or m         initial coordinates (X,Y). e.g. M 0,0

Draw line

L or l        ending coordinates (X,Y) e.g. L 10,10

Horizontlal line

H or h        X coordinate e.g. H 90.

Vertical line

V or v        Y coordinate. e.g. V 90

Cubic Bezier Curve

C or c        controlpoint1, controlpoint 2, endpoint e.g. C 10,10 20,20 30,10

Quadratic Bezier Curve

Q or q         controlpoint, endpoint. e.g. Q 100,100 130,240

Smooth cubic Bezier curve

S or s         controlpoint, endpoint. e.g. s 100,100 130,240

Smooth quadratic Bezier curve

T or t         controlpoint, endpoint. e.g. T 100,100 130,240

Arc

A or a        size, rotation angle, heavy drinkers, curve direction, endpoint.

Closed shape

Z or z        the current point to the starting point draw a line.

Example VII.8 Speaker- StreamGeometry

VII.9. Speaker - StreamGeometry

Path Fill="Yellow"

              Stroke="Red"

              Data="M 120,50 L 0,60 0,140 120,150 170,200 A 20,30,0,0, 0, 170, 0 Z"/>

Example VII.9 StreamGeometry

VII.10. StreamGeometry

<Path Stroke="Black" Fill="Gray" Data="M 100,100 C 110,300 400,-100 400,100" />

CombinedGeometry

CombinedGeometry is used for the combination of two geometric object.

<CombinedGeometry>

      <CombinedGeometry.Geometry1>

        Elem

      </CombinedGeometry.Geometry1>

      <CombinedGeometry.Geometry2>

        Elem

      </CombinedGeometry.Geometry2>

</CombinedGeometry>

GeometryCombineMode properties:

  1. Union

  2. Intersect

  3. Exclude

  4. Xor

Example VII.10 Union

VII.11. Union

<Path Fill="Gainsboro">

        <Path.Data>

             <CombinedGeometry GeometryCombineMode="Union">

                    <CombinedGeometry.Geometry1>

                       <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                      <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />

                    </CombinedGeometry.Geometry2>

             </CombinedGeometry>

        </Path.Data>

</Path>

Example VII.11 Intersect

VII.12. Intersect

<Path Fill="Gainsboro">

            <Path.Data>

                <CombinedGeometry GeometryCombineMode="Intersect">

                    <CombinedGeometry.Geometry1>

                       <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                      <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

            </Path.Data>

</Path>

Example VII.12 Exclude

VII.13. Exclude

<Path Fill="Gainsboro">

        <Path.Data>

                <CombinedGeometry GeometryCombineMode="Exclude">

                    <CombinedGeometry.Geometry1>

                       <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                      <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

       </Path.Data>

</Path>

Example VII.13 Xor

VII.14. Xor

<Path Fill="Gainsboro">

        <Path.Data>

                <CombinedGeometry GeometryCombineMode="Xor">

                    <CombinedGeometry.Geometry1>

                      <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />

                    </CombinedGeometry.Geometry1>

                    <CombinedGeometry.Geometry2>

                      <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />

                    </CombinedGeometry.Geometry2>

                </CombinedGeometry>

        </Path.Data>

</Path>