您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

Windows 8 Store Apps 開發實戰 (18)：繪圖系統全解析 — Shape、Path、Stroke、Brush 四大核心

編輯：關於.NET

前言：保留模式向量繪圖的四大基石

Windows 8 XAML 採保留模式繪圖，Shape、Path、Stroke、Brush 構成向量圖形系統的核心。本篇從基本幾何圖形到複雜路徑、筆劃樣式、四大畫筆類型，逐層拆解並給出可直接套用的 XAML 範例。

一、Shape — 七種基本幾何圖形

類別	關鍵屬性	說明
`Line`	X1, Y1, X2, Y2	直線段
`Rectangle`	Width, Height, RadiusX, RadiusY	矩形/圓角矩形
`Ellipse`	Width, Height	橢圓/圓形
`Polyline`	Points="x1,y1 x2,y2..."	開放折線
`Polygon`	Points	閉合多邊形（自動封閉首尾）
`Path`	Data (Geometry)	任意複雜路徑（見下節）

Stretch 列舉控制填充行為

None：原尺寸，超出剪裁
Fill：填滿容器，不保持比例
Uniform：等比縮放至容器內（預設）
UniformToFill：等比縮放填滿容器，超出剪裁

二、Path — Geometry 系統的無限可能

Path.Data 接受任意 Geometry 衍生類別：

Geometry 類別	關鍵屬性	用途
`EllipseGeometry`	Center, RadiusX, RadiusY	橢圓
`RectangleGeometry`	Rect (x,y,w,h)	矩形
`LineGeometry`	StartPoint, EndPoint	直線
`PathGeometry`	Figures (PathFigure 集合)	複雜路徑：弧、貝茲、多段線
`GeometryGroup`	Children, FillRule	多幾何體合成，支援 EvenOdd/Nonzero 填充規則

PathGeometry 片段類型

LineSegment：單一直線段
PolyLineSegment：多連續線段
ArcSegment：橢圓弧段（Size, Point, RotationAngle, IsLargeArc, SweepDirection）
BezierSegment：三次貝茲曲線（Point1, Point2, Point3）
QuadraticBezierSegment：二次貝茲曲線
PolyBezierSegment/PolyQuadraticBezierSegment：多段貝茲

三、Stroke — 筆劃樣式完整控制

屬性	型別/列舉	效果
`StrokeDashArray`	DoubleCollection	虛線模式：實線長、空白長交替（單位 = StrokeThickness/2）
`StrokeDashCap`	PenLineCap	虛線端點：Flat/Round/Square/Triangle
`StrokeStartLineCap` / `StrokeEndLineCap`	PenLineCap	線段首尾端點樣式
`StrokeDashOffset`	double	虛線起始相位偏移
`StrokeLineJoin`	PenLineJoin	折線連接：Bevel/Miter/Round
`StrokeMiterLimit`	double	Miter 連接最大斜接長度比（預設 10）

虛線單位換算範例

StrokeThickness="20"、StrokeDashArray="2 4 6" → 實線 20、空白 40、實線 60、空白 20、實線 40、空白 60（單位 = Thickness/2 = 10）。

四、Brush — 四大畫筆類型

1. SolidColorBrush — 純色

<SolidColorBrush Color="#88FF0000" /> <!-- ARGB：50% 透明紅 -->

色彩格式：命名色、#RGB、#ARGB、#RRGGBB、#AARRGGBB。

2. ImageBrush — 圖片磚貼

<ImageBrush ImageSource="/Assets/Logo.png" 
    Stretch="Fill" AlignmentX="Right" AlignmentY="Bottom" />

Stretch 同 Shape；AlignmentX/Y 控制對齊。

3. WebViewBrush — 瀏覽器快照

<WebView x:Name="webView" Source="https://webabcd.cnblogs.com" />
<Rectangle>
  <Rectangle.Fill><WebViewBrush SourceName="webView" /></Rectangle.Fill>
</Rectangle>
<!-- 載入完成後必須呼叫 webViewBrush.Redraw() 更新畫面 -->

4. LinearGradientBrush — 線性漸層

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" 
    MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
  <GradientStop Color="Red" Offset="0.0" />
  <GradientStop Color="Green" Offset="0.25" />
  <GradientStop Color="Blue" Offset="0.75" />
  <GradientStop Color="Yellow" Offset="1.0" />
</LinearGradientBrush>

關鍵屬性解析

屬性	說明
`StartPoint/EndPoint`	漸層向量起終點（0-1 相對座標或絕對座標）
`MappingMode`	RelativeToBoundingBox (預設) / Absolute
`SpreadMethod`	Pad (延伸邊色)、Reflect (鏡像重複)、Repeat (平鋪重複)
`ColorInterpolationMode`	SRgbLinearInterpolation (預設) / ScRgbLinearInterpolation