WPF基礎之幾何圖形

本文轉載自查看原文 2019-01-28 17:15 911 WPF

之前的總結

01 WPF基礎分享之布局

02 WPF基礎之路由事件

路徑和幾何圖形

Shape類還有一個類沒介紹，就path類，path類能夠包含任何簡單形狀、多組形狀以及更復雜的要素，如曲線。Path類提供了Data屬性，改屬性接收一個Geometry對象，該對象定義路徑包含一個或多個圖形。

不能直接的創建Geometry對象，因為Geometry是抽象類，它子類的包含如下：

名稱	說明
LineGeometry	代表直線，該幾何圖形相當於Line形狀。
RectangleGeometry	代表矩形(可以具有圓形拐角)，該幾何圖形相當於Rectangle形狀。
EllipseGeometry	代表橢圓，該圖形相當於Ellipse形狀。
GeometryGroup	為單個路徑添加任意多個Geometry對象，使用EvenOdd或NonZero填充規則來確定要填充的區域。
CombinedGeometry	將兩個幾何圖形合並為一個形狀。可使用CombineMode屬性選擇如何組合兩個幾何圖形。
PathGeometry	代表更復雜的弧線、曲線以及直線構成的圖形，並且既可以是閉合的，也可以是不閉合的。
StreamGeometry	相當於PathGeometry的只讀輕量級。StreamGeometry圖形可節省內存，因為它不在內存中同時保存路徑的所有分段。並且這類圖形一旦被創建就不能再修改。

直線、矩形和橢圓圖形

LineGeometry、RectangleGeometry以及EllipseGeometry類直接對應於Line、Rectangle以及Ellipse形狀。

<Rectangle Width="100" Height="50" Fill="Yellow" Stroke="Blue"></Rectangle>
 <Path Fill="Yellow" Stroke="Blue">
            <Path.Data>
                <RectangleGeometry Rect="0,0 100,50"></RectangleGeometry>
            </Path.Data>
        </Path>

Rect屬性代表左上角X、Y坐標。后面兩個值設置矩形的寬度和高度。

<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100"></Line>
        <Path Stroke="Blue">
            <Path.Data>
                <LineGeometry StartPoint="0,0" EndPoint="10,100"></LineGeometry>
            </Path.Data>
        </Path>
 <Ellipse Fill="#0899FF" Height="50" Width="100" HorizontalAlignment="Left"></Ellipse>
        <Path Fill="#0899FF">
            <Path.Data>
                <EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"></EllipseGeometry>
            </Path.Data>
        </Path>

使用GeometryGroup組合形狀

 <Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10">
            <Path.Data>
                <GeometryGroup>
                    <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
                    <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>

相當於使用了兩個Path元素，這樣做的優點是用一個元素代替了兩個元素，降低了用戶界面的開銷。

另一個優點是可在幾個獨立的Path元素中重復使用相同的幾何圖形，只要在Resources中定義幾何圖形即可。

 <Window.Resources>
        <GeometryGroup x:Key="Geometry">
            <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
            <EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
        </GeometryGroup>
    </Window.Resources>
    <Canvas>
        <TextBlock Canvas.Top="50" Canvas.Left="20" FontSize="25" FontWeight="Bold">Hello There</TextBlock>
        <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" Data="{StaticResource Geometry}">
        </Path>
    </Canvas>

如果把TextBlok放在Pah后面就是如下效果

使用CombinedGeometry融合幾何圖形

GemoetryGroup適用於繪制形狀並在其內部減去另一個形狀來創建新的形狀。如果形狀邊界相互交叉，那就用到CombinedGeometry。CombinedGeometry用於組合到一起並且不相互包含的形狀。它只包含兩個幾何圖形，通過Geometry1和Geometry2屬性提供兩個幾何圖形。填充的規則使用GeometryCombineMode屬性。

名稱	說明
Union	創建包含兩個幾何圖形所有區域的形狀。
Intersect	創建包含兩個幾何圖形共有區域的形狀。
Xor	創建包含兩個幾何圖形非共有區域的形狀。
Exclude	創建的形狀包含第一個幾何圖形的所有區域，但不包含第二個幾何圖形的區域。

<Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="85,50" RadiusX="65" RadiusY="35"></EllipseGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>

CombinedGeometry可以嵌套使用這樣就可以構建非常復雜的形狀。

 <Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <CombinedGeometry GeometryCombineMode="Exclude">
                            <CombinedGeometry.Geometry1>
                                <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"></EllipseGeometry>
                            </CombinedGeometry.Geometry1>
                            <CombinedGeometry.Geometry2>
                                <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"></EllipseGeometry>
                            </CombinedGeometry.Geometry2>
                        </CombinedGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="45,5 10,90">
                            <RectangleGeometry.Transform>
                                <RotateTransform Angle="45" CenterX="50" CenterY="50"></RotateTransform>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>

使用PathGeometry繪制曲線和直線

PathGeometry是功能強大的圖形，它能繪制其他所有幾何圖形能夠繪制的內容，也能繪制其他幾何圖形不能繪制的內容。每個PathGeometry都由一個或多個PathFigure對象組成，PathFigure的4個重要屬性。

名稱	說明
StartPoint	指示從何處開始繪制圖形的Point對象。
Segments	用於繪制圖形的PathSegment對象的集合。
IsClosed	如果為True，WPF添加直線來連接起點和終點。
IsFilled	如果為True,就使用Path.Fill畫刷填充圖形內部的區域。

PathFigure對象是由大量的線段構成的。主要的線段類如下:

名稱	說明
LineSegment	在兩點之間創建直線。
ArcSegment	在兩點之間創建橢圓形直線。
BezierSegment	在兩點之間創建貝塞爾曲線。
QuadraticBezierSegment	創建形式更簡單的貝塞爾曲線，只有一個控制點而不是兩個控制點，並且計算速度更快。
PolyLineSegment	創建一系列直線。可使用多個LineSegment對象得到相同的結果，但使用單個PolyLineSegment對象更簡明。
PolyBezierSegment	創建一系列貝塞爾曲線。
PolyQuadraticBezierSegment	創建一系列更簡單的二次貝塞爾曲線。

直線

 <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10,100">
                        <LineSegment Point="100,100"></LineSegment>
                        <LineSegment Point="100,50"></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

每個PathGeometry可包含任意數量的PathFigure對象，這意味着可創建幾個相互獨立或閉合圖形，作為路徑的一部分。

弧線

<Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="False" StartPoint="10,100">
                        <ArcSegment Point="250,150" Size="200,300"></ArcSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

貝塞爾曲線

定義貝塞爾曲線需要3個點。前兩個點是控制點，第3個是曲線的終點。同樣起點是路徑的起點或前一條線段的終點。

在起點，貝塞爾曲線和從第一個控制點到起點之間的直線相切，在終點，貝塞爾曲線和連接終點與最后一個點的直線相切（在中間是曲線）。
彎曲程度由兩個控制點的距離決定。如果一個控制點更遠，該控制點會更強的拉貝塞爾曲線。

 <Canvas>
        <Path Stroke="Blue" StrokeThickness="5" Canvas.Top="20">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="10,10">
                        <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150"></BezierSegment> 
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Green" StrokeThickness="2" StrokeDashArray="5, 2" Canvas.Top="20">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="10,10" EndPoint="130,30"></LineGeometry>
                    <LineGeometry StartPoint="40,140" EndPoint="130,150"></LineGeometry>
                </GeometryGroup>
            </Path.Data>  
        </Path>
        <Path Fill="Red" Stroke="Red" StrokeThickness="8" Canvas.Top="20">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="130,30"></EllipseGeometry>
                    <EllipseGeometry Center="40,140"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>

使用幾何圖形進行剪裁

幾何圖形是創建形狀的最強大的方法，另一種用途就是用於設置Clip屬性，所有的元素都提供了該屬性。可以通過Clip屬性約束元素的外邊界以符合特定的幾何圖形。

<Window.Resources>
        <GeometryGroup x:Key="clipGremetry" FillRule="Nonzero">
            <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"></EllipseGeometry>
            <EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"></EllipseGeometry>
            <EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140"></EllipseGeometry>
        </GeometryGroup>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Clip="{StaticResource clipGremetry}"> A button</Button>
        <Image Grid.Column="1" Clip="{StaticResource clipGremetry}" Stretch="None" Source="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg"></Image>
    </Grid>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF之幾何圖形Geometry WPF的二維繪圖（二）——幾何圖形Geometry WPF Geometry幾何圖形數據圖標 Android自定控件基礎（一）——幾何圖形繪制 keyshot幾何圖形編輯【WPF學習】第四十三章路徑和幾何圖形 [Aaronyang] 寫給自己的WPF4.5 筆記18[幾何圖形*Geometry圖文並茂講解] HTML5實現繪制幾何圖形這幾個幾何圖形你會繪制嗎用css3繪制你需要的幾何圖形