WFP：Geometries几何图形集合--Geometry几何图形（3）

Geometry Usage几何图形使用

实现效果：
如图：

关键词：

1. Path-Path.Data-GeometryGroup--PathGeometry-PathGeometry.Figures--PathFigure.Segments
2. Border-Rectangle--DrawingBrush-GeometryDrawing--GeometryGroup--
3. Border-Rectangle-Fill-DrawingBrush-viewport-TileMode
4. Border-Image-Clip-GeometryGroup--

在Border中直接使用Path绘制图形，同时设置属性Stroke StrokeThickness Fill="Red"进行显示

<Border Height="200" Width="200" BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyGridBrushResource}">
  <Path Stroke="Black" StrokeThickness="1" Fill="Red">
    <Path.Data>
      <GeometryGroup>
          <RectangleGeometry Rect="50,5 100,10" />
          <RectangleGeometry Rect="5,5 95,180" />
          <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
          <RectangleGeometry Rect="50,175 100,10" />
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure IsClosed="True" StartPoint="50,50">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                      <BezierSegment Point1="125,300" Point2="75,100"  Point3="50,50"/>
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>               
      </GeometryGroup>
    </Path.Data>
  </Path>
</Border>

在Rectangle方框形状中 使用GeometryGroup组合几何形状成为GeometryDrawing几何绘图 并做为DrawingBrush绘图画刷 填充到方框中，进行显示。其中需设置GeometryDrawing.Pen画笔

<Rectangle Height="200" Width="200" Stroke="Black" StrokeThickness="1"
  HorizontalAlignment="Left">
  <Rectangle.Fill>
    <DrawingBrush Viewbox="0,0,200,200" ViewboxUnits="Absolute">
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="#CCCCFF">
          <GeometryDrawing.Pen>
            <Pen Thickness="1" Brush="Black" />
          </GeometryDrawing.Pen>
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <RectangleGeometry Rect="50,5 100,10" />
              <RectangleGeometry Rect="5,5 95,180" />                   
              <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
              <RectangleGeometry Rect="50,175 100,10" />
              <PathGeometry>
                <PathGeometry.Figures>
                  <PathFigureCollection>
                    <PathFigure IsClosed="true" StartPoint="50,50">
                      <PathFigure.Segments>
                        <PathSegmentCollection>
                          <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                          <BezierSegment Point1="125,300" Point2="75,100" Point3="50,50"/>
                        </PathSegmentCollection>
                      </PathFigure.Segments>
                    </PathFigure>
                  </PathFigureCollection>
                </PathGeometry.Figures>
              </PathGeometry>               
            </GeometryGroup>                  
          </GeometryDrawing.Geometry>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

在Tile图画中，把Rectangle方框的的 绘图画刷做为图块，设置Viewport="0,0,0.5,0.5" TileMode="FlipXY"属性，填充到方框区域里。最终造成4个X、Y轴对称的图案。

最后一个使用几何图形组 设置图片的裁决区域，造成裁决效果：

<Border BorderBrush="Black" BorderThickness="1">
    <Image Source="sampleImages\Waterlilies.jpg" Width="200" Height="200"
      HorizontalAlignment="Left">
      <Image.Clip>
          <GeometryGroup>
              <RectangleGeometry Rect="50,5 100,10" />
              <RectangleGeometry Rect="5,5 95,180" />
              <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
              <RectangleGeometry Rect="50,175 100,10" />
              <PathGeometry>
                <PathGeometry.Figures>
                  <PathFigureCollection>
                    <PathFigure IsClosed="true" StartPoint="50,50">
                      <PathFigure.Segments>
                        <PathSegmentCollection>
                          <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                          <BezierSegment Point1="125,300" Point2="75,100" Point3="50,50"/>
                        </PathSegmentCollection>
                      </PathFigure.Segments>
                    </PathFigure>
                  </PathFigureCollection>
                </PathGeometry.Figures>
              </PathGeometry>               
          </GeometryGroup>            
      </Image.Clip>
    </Image>
  </Border>

ShapeGeometry几何形状

关键词：

1. GeometryGroup-FillRule--Nonzero/EvenOdd

<Border Height="150" Width="250" BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyGridBrushResource}">
  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
      <GeometryGroup FillRule="EvenOdd">
        <LineGeometry StartPoint="10,10" EndPoint="50,30" />
        <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />              
        <RectangleGeometry Rect="30,55 100 30" />
      </GeometryGroup>
    </Path.Data>
  </Path>
</Border>

PathGeometry几何路径与GeometryAttributeSyntactic几何特征句法

<Border Height="200" Width="250" BorderBrush="Black" BorderThickness="1" Background="{StaticResource MyGridBrushResource}">
  <Path Stroke="Black" StrokeThickness="1" 
    Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />
</Border>

Combining Geometry几何图形组合

关键词：

1. GeometryGroup--FillRule
2. CombinedGeometry-GeometryCombineMode=Exclude、Intersect、Union 或 Xor。

见图示：

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    
    <!-- Combines two geometries using the intersect combine mode. -->
    <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>

扩展：相关类解析见下一章（4）