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）