背水一戰 Windows 10 (12) - 繪圖: Shape, Path
作者：webabcd
介紹
背水一戰 Windows 10 之 繪圖
- Shape - 圖形
- Path - 路徑
示例
1、演示“Shape”相關知識點
Drawing/Shape.xaml
<Page x:Class="Windows10.Drawing.Shape" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Drawing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- Windows.UI.Xaml.Shapes.Shape - 圖形 注：對於封閉圖形的 stroke 來說，其是繪制在控件內部的 --> <!-- Line - 畫直線 --> <!-- X1, Y1 - 直線起點坐標 X2, Y2 - 直線終點坐標 --> <Line X1="0" Y1="0" X2="300" Y2="100" Stroke="Blue" StrokeThickness="3" /> <!-- Rectangle - 畫矩形 --> <!-- Width - 矩形寬 Height - 矩形高 --> <Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" /> <!-- Polyline - 畫折線（即多條連接起來的直線） --> <!-- Points - 折線的每個點的坐標 --> <Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="3" /> <!-- Polygon - 畫多邊形 --> <!-- Points - 多邊形的每個點的坐標 --> <Polygon Points="50,50 100,50 300,100 200,100 100,200" Fill="Yellow" Stroke="Red" StrokeThickness="6" /> <!-- Ellipse - 畫橢圓 --> <!-- Width - 橢圓寬 Height - 橢圓高 --> <Ellipse Width="100" Height="50" Fill="Orange" Stroke="Red" StrokeThickness="6" /> <!-- 矩形或橢圓在不設置寬和高時，可以指定其 Stretch 用以指定其相對於其容器的拉伸方式 Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚舉） Fill - 充滿容器，不保留長寬比 None - 不做任何處理，如果圖片比容器大，則多出的部分被剪裁 Uniform - 等比縮放到容器（默認值） UniformToFill - 充滿容器，且保留長寬比，多出的部分被剪裁 --> <Grid Width="200" Height="100" HorizontalAlignment="Left" Background="Black"> <Ellipse Fill="Orange" Stroke="Red" StrokeThickness="6" Stretch="UniformToFill" /> </Grid> </StackPanel> </Grid> </Page>
2、演示“Path”相關知識點
Drawing/Path.xaml
<Page x:Class="Windows10.Drawing.Path" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Drawing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10" HorizontalAlignment="Left"> <!-- Windows.UI.Xaml.Shapes.Path - 路徑，以下演示如何通過 Path 繪制圖形 Data - 要繪制的 Windows.UI.Xaml.Media.Geometry 數據（Geometry 有很多派生類，后面會一一介紹，其實都不太常用，最常用的就是直接畫路徑，見最后面） --> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- EllipseGeometry - 橢圓 Center - 原點坐標 RadiusX - X軸半徑 RadiusY - Y軸半徑 --> <EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" /> </Path.Data> </Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- RectangleGeometry - 矩形 Rect - 左上角點的坐標，矩形寬，矩形高 --> <RectangleGeometry Rect="100,0,100,50" /> </Path.Data> </Path> <Path Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- LineGeometry - 線 StartPoint - 起點坐標 EndPoint - 終點坐標 --> <LineGeometry StartPoint="200,0" EndPoint="300,50" /> </Path.Data> </Path> <Path Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- PathGeometry - 路徑，一個可能由弧、曲線、橢圓、直線、矩形組成的復雜圖形 --> <PathGeometry> <PathGeometry.Figures> <!-- StartPoint - 起點坐標 --> <PathFigure StartPoint="300,0"> <PathFigure.Segments> <!-- Path 的 Segment 集合 --> <PathSegmentCollection> <!-- LineSegment - 單一線段 PolyLineSegment - 線段集合 ArcSegment - 弧（橢圓的一部分） BezierSegment - 兩點之間的一條三次貝塞爾曲線 QuadraticBezierSegment - 兩點之間的一條二次貝塞爾曲線 PolyBezierSegment - 一條或多條三次貝塞爾曲線 PolyQuadraticBezierSegment - 一條或多條二次貝塞爾曲線 --> <!-- ArcSegment Size - 弧的 X 軸和 Y 軸半徑 Point - 該 Segment 的終點坐標，即下一個 Segment 的起點坐標 SweepDirection - 繪制方向（Clockwise - 順時針繪制；Counterclockwise - 逆時針繪制） RotationAngle - 橢圓圍繞 x 軸旋轉的角度（這個需要自己寫幾個示例去理解） IsLargeArc - 繪制的弧大於 180 度則為 true，反之則為 false（只讀） --> <ArcSegment Size="100,25" Point="400,50" /> <!-- LineSegment Point - 該 Segment 的終點坐標，即下一個 Segment 的起點坐標 --> <LineSegment Point="500,100" /> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- 本例演示 GeometryGroup 的 EvenOdd 填充規則 GeometryGroup - 由一個或多個 Geometry 組成 FillRule - 填充規則（System.Windows.Media.FillRule 枚舉） EvenOdd - 確定一個點是否位於填充區域內的規則，具體方法是從該點沿任意方向畫一條無限長的射線，然后計算該射線在給定形狀中因交叉而形成的路徑段數。如果該數為奇數，則點在內部；如果為偶數，則點在外部。 Nonzero - 確定一個點是否位於填充區域內的規則，具體方法是從該點沿任意方向畫一條無限長的射線，然后檢查形狀段與該射線的交點。從零開始計數，每當線段從左向右穿過該射線時加 1，而每當路徑段從右向左穿過該射線時減 1。計算交點的數目后，如果結果為零，則說明該點位於路徑外部。否則，它位於路徑內部。 --> <GeometryGroup FillRule="EvenOdd"> <LineGeometry StartPoint="200,0" EndPoint="300,100" /> <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" /> <RectangleGeometry Rect="200, 0, 100, 100" /> </GeometryGroup> </Path.Data> </Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5"> <Path.Data> <!-- 本例演示 GeometryGroup 的 Nonzero 填充規則 GeometryGroup - 由一個或多個 Geometry 組成 FillRule - 填充規則（System.Windows.Media.FillRule 枚舉） EvenOdd - 確定一個點是否位於填充區域內的規則，具體方法是從該點沿任意方向畫一條無限長的射線，然后計算該射線在給定形狀中因交叉而形成的路徑段數。如果該數為奇數，則點在內部；如果為偶數，則點在外部。 Nonzero - 確定一個點是否位於填充區域內的規則，具體方法是從該點沿任意方向畫一條無限長的射線，然后檢查形狀段與該射線的交點。從零開始計數，每當線段從左向右穿過該射線時加 1，而每當路徑段從右向左穿過該射線時減 1。計算交點的數目后，如果結果為零，則說明該點位於路徑外部。否則，它位於路徑內部。 --> <GeometryGroup FillRule="Nonzero"> <LineGeometry StartPoint="200,0" EndPoint="300,100" /> <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" /> <RectangleGeometry Rect="200, 0, 100, 100" /> </GeometryGroup> </Path.Data> </Path> <!-- 演示 Path 最常用的用法，即直接畫 1、直接指定 Geometry 數據 2、一般都是要借助工具，最流行的是“Metro Studio”，其 4.0 以上的版本可以在設計完后顯示對應的 Geometry 代碼 --> <Path Fill="Black" Stroke="White" StrokeThickness="6" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" Margin="5" /> </StackPanel> </Grid> </Page>
OK
[源碼下載]