WPF 10天修煉 第九天 - 幾何圖形

時間  2019-12-15
標籤 wpf 10天 修煉 第九 幾何圖形 简体版
原文   原文鏈接

幾何圖形express

使用LineGeometry、RectangleGeometry、EllipseGeometry對象分別繪製直線、矩形、橢圓。spa

使用GeometryGroup能夠繪製組合圖形。orm

<Window x:Class="WPFDemo.GeometryDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
       WindowStartupLocation="CenterScreen"
        Title="GeometryDemo" Height="500" Width="800">
   <Canvas>
        <StackPanel Canvas.Top="10" >
            <TextBlock Text="繪製無相交組合圖形"></TextBlock>
            <Path StrokeThickness="1" Fill="Yellow"  Stroke="Black" Margin="5" >
                <Path.Data  >
                    <!--使用GeometryGroup組合集合圖形-->
                    <GeometryGroup >
                        <!--繪製直線-->
                        <LineGeometry StartPoint="10,20" EndPoint="100,20" />
                        <!--繪製矩形-->
                        <RectangleGeometry Rect="10,50,100,50" />
                        <!--繪製橢圓-->
                        <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,160"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </StackPanel>
        <StackPanel Canvas.Top="10" Canvas.Left="150">
            <TextBlock Text="Nonzero方式填充圖形"></TextBlock>
            <Path StrokeThickness="1" Fill="Yellow"  Stroke="Black" Margin="5">
                <Path.Data  >
                    <!--使用GeometryGroup組合集合圖形-->
                    <GeometryGroup FillRule="Nonzero">
                        <!--繪製直線-->
                        <LineGeometry StartPoint="10,20" EndPoint="100,20" />
                        <!--繪製矩形-->
                        <RectangleGeometry Rect="10,50,100,50" />
                        <!--繪製橢圓-->
                        <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,50"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </StackPanel>
        <StackPanel Canvas.Top="10" Canvas.Left="300">
            <TextBlock Text="EvenOdd方式填充圖形"></TextBlock>
            <Path StrokeThickness="1" Fill="Yellow"  Stroke="Black" Margin="5" >
                <Path.Data  >
                    <!--使用GeometryGroup組合集合圖形-->
                    <GeometryGroup FillRule="EvenOdd">
                        <!--繪製直線-->
                        <LineGeometry StartPoint="10,20" EndPoint="100,20" />
                        <!--繪製矩形-->
                        <RectangleGeometry Rect="10,50,100,50" />
                        <!--繪製橢圓-->
                        <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,50"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </StackPanel>
    </Canvas>
</Window>

 

使用CombinedGeometry結合形狀xml

使用GeometryCombineMode的枚舉屬性能夠爲組合圖形應用一些布爾運算。對象

Union：經過採用兩個區域的並集合並兩個區域。新的圖形爲兩個圖形。blog

Inntersect：經過採用兩個區域的交集合並兩個區域。新的圖形爲兩個圖形相交部分。ip

Xor：將在第一個圖形中但不在第二個圖形中的區域，和在第二個圖形但不在第一個圖形的區域進行合併。新的區域爲（A-B）+（B-A）組成。it

Exclude：從第一個圖形總除去第二個圖形。io

<Window x:Class="WPFDemo.CombinedGeometryDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="CombinedGeometryDemo" Height="530" Width="500">
    <Canvas>
        <StackPanel Canvas.Left="10" Canvas.Top="10">
            <TextBlock Text="Union計算組合圖形" />
            <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" >
                <Path.Data>
                    <!---使用Union組合多個圖形-->
                    <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>
        </StackPanel>
        <StackPanel Canvas.Left="250" Canvas.Top="10">
            <TextBlock Text="Exclude計算組合圖形" />
            <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" >
                <Path.Data>
                    <!---使用Exclude組合多個圖形-->
                    <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>
        </StackPanel>
        <StackPanel Canvas.Left="10" Canvas.Top="250">
            <TextBlock Text="Intersect計算組合圖形" />
            <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" >
                <Path.Data>
                    <!---使用Intersect組合多個圖形-->
                    <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>
        </StackPanel>

       <StackPanel Canvas.Left="250" Canvas.Top="250">
            <TextBlock Text="Xor計算組合圖形" />
            <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" >
                <Path.Data>
                    <!---使用Xor組合多個圖形-->
                    <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>
        </StackPanel>
    </Canvas>
</Window>

 

PathGeometry對象form

PathGeometry對象是集合圖形中最強大的元素，使用該對象能夠繪製弧形、曲線、橢圓、直線和矩形等組成的複雜圖形。每一個PathGeomery對象都使用一個和多個PathFigure對象，該對象存儲在PathGeometry.Figures集合中。每一個PathFigure對象均可以由一個或多個PathSegment對象組成。每一個PathGeomery對象都使用一個和多個PathFigure對象，該對象存在PaathGeometryFigures集合中。每一個PathFigure對象都有一個或多個PathSegment對象組成。

PathFigure的重要屬性：

StartPoint：指定線段的起點

Segments：一個PathSegment對象的集合，用於繪製圖形。

IsClosed：若是設置爲true，將添加一個直線鏈接起點和終點。

IsFilled：若是設置爲true，圖形的內部區域將使用Path.Fill畫刷填充。

 

PathSegment派生類：

LineSegment：在兩個點之間建立直線。

ArcSegment：在兩個點之間建立圓弧。

BezierSegment：在兩個點之間建立貝塞爾曲線。

QuadraticBezierSegment：在PathFigure的兩點之間建立一條二次賽貝爾曲線。

PolyLineSegment：建立一系列直線，能夠使用多個LineSegment對象得到一樣的效果，可是使用polyLineSegment更簡單。

PolyBeeierSegment：建立一條或多條三次貝塞爾曲線。

PolyQuadraticBezierSegment：建立一系列二次貝塞爾線段。

使用PathGeeometry繪製圖形

<Window x:Class="WPFDemo.PathGeometryDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="PathGeometryDemo" Height="350" Width="700">
    <Canvas>
        <!--繪製直線-->
        <StackPanel Canvas.Top="10" Canvas.Left="10">
            <TextBlock Text="繪製直線IsClose設置爲False"/>
            <Path Stroke="Blue">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="10,10" >
                            <!--使用LineSegment繪製直線-->
                            <LineSegment  Point="10,100"/>
                            <LineSegment  Point="100,50"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </StackPanel>
        <StackPanel Canvas.Top="150" Canvas.Left="10">
            <TextBlock Text="繪製直線IsClose設置爲False"/>
            <Path Stroke="Blue">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="False" StartPoint="10,10" >
                            <!--使用LineSegment繪製直線-->
                            <LineSegment  Point="10,100"/>
                            <LineSegment  Point="100,50"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </StackPanel>
 
        <!--繪製弧線-->
        <StackPanel Canvas.Left="200" Canvas.Top="10">
            <Path Stroke="Black" StrokeThickness="1">
              <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigureCollection>
                                <PathFigure StartPoint="10,10">
                                    <PathFigure.Segments>
                                        <PathSegmentCollection>
                                            <!--繪製弧線-->
                                            <ArcSegment Size="100,50" RotationAngle="45" IsLargeArc="True" SweepDirection="Counterclockwise" Point="200,100"></ArcSegment>
                                        </PathSegmentCollection>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathFigureCollection>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </StackPanel>

       <!--繪製貝塞爾曲線-->
        <StackPanel Canvas.Top="10" Canvas.Left="400">
            <Path Stroke="Black" StrokeThickness="5" >
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="10,10">
                            <!--繪製貝塞爾曲線-->
                            <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </StackPanel>
    </Canvas>
</Window>

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程