Windows 8 Store Apps學習(18) 繪圖 Shape, Path, Stroke, Brush

介紹

重新想象 Windows 8 Store Apps 之 繪圖

Shape - 圖形

Path - 路徑

Stroke - 筆劃

Brush - 畫筆

示例

1、演示如何繪制圖形

Drawing/Shape.xaml

<Page
    x:Class="XamlDemo.Drawing.Shape"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.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="120 0 0 0">
    
            <!--
                繪制圖形
            -->
    
            <!--畫直線-->
            <Line X1="0" Y1="0" X2="300" Y2="100" Stroke="Blue" StrokeThickness="3" />
                
            <!--畫矩形-->
            <Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" />
    
            <!--畫折線（即多條連接起來的直線）-->
            <Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="3" />
    
            <!--畫多邊形-->
            <Polygon Points="50,50 100,50 300,100 200,100 100,200" Fill="Yellow" Stroke="Red" StrokeThickness="6" />
    
            <!--畫橢圓-->
            <Ellipse Width="100" Height="50" Fill="Orange" Stroke="Red" StrokeThickness="6" />
                
                
            <!--
                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、演示如何繪制路徑

Drawing/Path.xaml

<Page
    x:Class="XamlDemo.Drawing.Path"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.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="120 0 0 0" HorizontalAlignment="Left">
    
            <!--通過 Path 繪制圖形-->
    
            <!--
                Path.Data - 要繪制的 Geometry
            -->
            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6">
                <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">
                <Path.Data>
                    <!--
                        RectangleGeometry - 矩形
                            Rect - 左上角點的坐標，矩形寬，矩形高
                    -->
                    <RectangleGeometry Rect="100,0,100,50" />
                </Path.Data>
            </Path>
    
            <Path Stroke="Blue" StrokeThickness="6" >
                <Path.Data>
                    <!--
                        LineGeometry - 線
                            StartPoint - 起點坐標
                            EndPoint - 終點坐標
                    -->
                    <LineGeometry StartPoint="200,0" EndPoint="300,100" />
                </Path.Data>
            </Path>
    
            <Path Stroke="Blue" StrokeThickness="6">
                <Path.Data>
                    <!--
                        PathGeometry - 路徑，一個可能由弧、曲線、橢圓、直線、矩形組成的復雜圖形
                    -->
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <!--
                                StartPoint - 起點坐標
                            -->
                            <PathFigure StartPoint="300,0">
                                <PathFigure.Segments>
                                    <!--
                                        Path 的 Segment 集合
                                    -->
                                    <PathSegmentCollection>
                                        <!--
                                            LineSegment - 單一線段
                                            PolyLineSegment - 線段集合
                                            ArcSegment - 弧（橢圓的一部分）
                                            BezierSegment - 兩點之間的一條三次貝塞爾曲線
                                            QuadraticBezierSegment - 兩點之間的一條二次貝塞爾曲線
                                            PolyBezierSegment - 一條或多條三次貝塞爾曲線
                                            PolyQuadraticBezierSegment - 一條或多條二次貝塞爾曲線
                                        -->
                                        <!--
                                            Size - 弧的 X 軸和 Y 軸半徑
                                            Point - 該 Segment 的終點坐標，即下一個 Segment 的起點坐標
                                        -->
                                        <ArcSegment Size="100,50" Point="400,100" />
                                        <!--
                                            Point - 該 Segment 的終點坐標，即下一個 Segment 的起點坐標
                                        -->
                                        <LineSegment Point="500,200" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
    
            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6">
                <Path.Data>
                    <!--
                        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>
    
        </StackPanel>
    </Grid>
</Page>

3、演示 Stroke（筆劃）的應用

Drawing/Stroke.xaml

<Page
    x:Class="XamlDemo.Drawing.Stroke"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.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="120 0 0 0">

    
            <!--Stroke - 筆劃-->
                
            <!--
                StrokeDashArray - 虛線實體和虛線間隙的值的集合
                    以本例為例：第1條實線長度2，第1條虛線長度4，第2條實線長度6，第2條虛線長度2，第3條實線長度4，第3條虛線長度6
                    長度為 StrokeDashArray 乘以 StrokeThickness/2
            -->
            <Line X1="0" Y1="0" X2="1000" Y2="0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2 4 6" />
    
            <!--
                StrokeDashCap - 虛線兩端（線帽）的類型（System.Windows.Media.PenLineCap 枚舉）
                    PenLineCap.Flat - 無。默認值
                    PenLineCap.Round - 直徑等於 StrokeThickness
                    PenLineCap.Square - 高度等於 StrokeThickness 並且 寬度等於 StrokeThickness/2
                    PenLineCap.Triangle - 底邊長等於 StrokeThickness 的等腰直角三角形
            -->
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" 

StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Flat" />
    
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" 

StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Round" />
    
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" 

StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Square" />
    
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" 

StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Triangle" />
    
            <!--
                StrokeStartLineCap - 虛線起始端（線帽）的類型（System.Windows.Media.PenLineCap 

枚舉）
                StrokeEndLineCap - 虛線終結端（線帽）的類型（System.Windows.Media.PenLineCap 枚

舉）
            -->
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" 

/>
    
            <!--
                StrokeDashOffset - 虛線的起始點的便宜位置
                    以下舉例：畫一條以虛線間隙為起始的虛線
            -->
            <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashOffset="10" />
    
    
    
            <!--
                StrokeLineJoin - 圖形連接點處的連接類型（System.Windows.Media.PenLineJoin 枚舉）
                    StrokeLineJoin.Bevel - 線形連接
                    StrokeLineJoin.Miter - 角形連接。默認值
                    StrokeLineJoin.Round - 弧形連接
            -->
            <StackPanel Margin="0 30 0 0" Orientation="Horizontal">
                <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Bevel" />
    
                <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Miter" />
    
                <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Round" />
            </StackPanel>
    
    
    
            <!--
                StrokeMiterLimit - 斜接長度（藍色線部分）與 StrokeThickness/2 的比值。默認值 10

，最小值 1
            -->
            <Grid Margin="0 30 0 0" HorizontalAlignment="Left">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="120" />
                </Grid.ColumnDefinitions>
    
                <Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Orange" 

StrokeThickness="20" StrokeMiterLimit="1" />
                <Line Grid.Column="0" X1="50" Y1="10" X2="50" Y2="0" Stroke="Blue" />
                <Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Red" />
    
                <Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Orange" 

StrokeThickness="20" StrokeMiterLimit="2.0" />
                <Line Grid.Column="1" X1="50" Y1="10" X2="50" Y2="-10" Stroke="Blue" />
                <Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Red" />
            </Grid>
                
        </StackPanel>
    </Grid>
</Page>

4、演示 Brush（畫筆）的應用

Drawing/Brush.xaml

<Page
    x:Class="XamlDemo.Drawing.Brush"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.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="120 0 0 0" HorizontalAlignment="Left">
    
            <!--Brush - 畫筆-->
    
            <!--
                SolidColorBrush - 單色畫筆
                    Color - 顏色
                        格式如下：
                        預定義的Color的名稱。如：Red, Green, Blue
                        #RGB。如：#F00
                        #ARGB（A為Alpha值）。如：#FF00, #F0F0, #F00F
                        #RGB。如：#FF0000, #00FF00, #0000FF
                        #ARGB（A為Alpha值）。如：#FFFF0000, #FF00FF00, #FF0000FF
            -->
            <Ellipse Margin="10" Width="200" Height="100" Stroke="Yellow" StrokeThickness="3" HorizontalAlignment="Left">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#88FF0000" />
                </Ellipse.Fill>
            </Ellipse>
    
    
            <!--
                ImageBrush - 圖像畫筆
                    ImageSource - 圖片地址
                    Stretch - 拉伸方式
                    AlignmentX - 水平方向的對齊方式。Center（默認值）, Left, Right
                    AlignmentY - 垂直方向的對齊方式。Center（默認值）, Top, Bottom
            -->
            <Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="1" HorizontalAlignment="Left" Margin="0 10 0 0">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Assets/Logo.png" AlignmentX="Right" AlignmentY="Bottom" Stretch="Fill" />
                </Rectangle.Fill>
            </Rectangle>
    
    
            <WebView x:Name="webView" Source="http://webabcd.cnblogs.com" Width="300" Height="100" LoadCompleted="webView_LoadCompleted_1" HorizontalAlignment="Left" Margin="0 10 0 

0" />
            <!--
                WebView - 浏覽器畫筆
                    SourceName - WebView 指向的 http 地址
                
                注：如果需要顯示 WebView 的最新結果，需要調用 WebViewBrush.Redraw() 方法
            -->
            <Rectangle Width="300" Height="100" Stroke="Red" HorizontalAlignment="Left" Margin="0 10 0 0">
                <Rectangle.Fill>
                    <WebViewBrush x:Name="webViewBrush"  SourceName="webView"/>
                </Rectangle.Fill>
            </Rectangle>
    
    
            <StackPanel Orientation="Horizontal"  HorizontalAlignment="Left" Margin="0 10 0 0">
                <Grid>
                    <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
                        <Rectangle.Fill>
                            <!--
                                LinearGradientBrush - 線性漸變畫筆
                                    StartPoint - 線性漸變的起點。默認漸變方向為對角線方向，默認

值為左上角0,0
                                    EndPoint - 線性漸變的終點。默認漸變方向為對角線方向，默認值

為右下角1,1
                                    GradientStop - 漸變中，過渡點的設置
                                        Color - 過渡點的顏色
                                        Offset - 過渡點的位置。相對於漸變線的比值。最小值0.0（默

認值），最大值1.0
                                    ColorInterpolationMode - 插入漸變顏色的方式

（System.Windows.Media.ColorInterpolationMode 枚舉）
                                        ScRgbLinearInterpolation - scRGB
                                        SRgbLinearInterpolation - sRGB。默認值
                            -->
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" ColorInterpolationMode="SRgbLinearInterpolation">
                                <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>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
                </Grid>
    
                <Grid Margin="10 0 0 0">
                    <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
                        <Rectangle.Fill>
                            <!--
                                MappingMode - 指定線性漸變的起點（StartPoint）和終點（EndPoint）相對於輸出區域是相對的還是絕對的（System.Windows.Media.BrushMappingMode 枚舉）
                                    MappingMode.RelativeToBoundingBox - 相對坐標。默認值
                                    MappingMode.Absolute - 絕對坐標
                            -->
                            <LinearGradientBrush StartPoint="0,0" EndPoint="200,100" MappingMode="Absolute">
                                <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>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
                </Grid>
    
                <Grid Margin="10 0 0 0">
                    <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
                        <Rectangle.Fill>
                            <!--
                                SpreadMethod - 線性漸變線（黑色線）之外， 輸出區域之內的漸變方式（System.Windows.Media.GradientSpreadMethod枚舉）
                                    GradientSpreadMethod.Pad - 用線性漸變線末端的顏色值填充剩余空間。默認值       
                            -->
                            <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Pad">
                                <GradientStop Color="Red" Offset="0.0" />
                                <GradientStop Color="Green" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
                </Grid>
    
                <Grid Margin="10 0 0 0">
                    <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
                        <Rectangle.Fill>
                            <!--
                                SpreadMethod - 線性漸變線（黑色線）之外， 輸出區域之內的漸變方式（System.Windows.Media.GradientSpreadMethod枚舉）
                                    GradientSpreadMethod.Reflect - 相鄰填充區域，以 相反方向 重復漸變，直至填充滿整個剩余空間
                            -->
                            <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Reflect">
                                <GradientStop Color="Red" Offset="0.0" />
                                <GradientStop Color="Green" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
                </Grid>
    
                <Grid Margin="10 0 0 0">
                    <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
                        <Rectangle.Fill>
                            <!--
                                SpreadMethod - 線性漸變線（黑色線）之外， 輸出區域之內的漸變方式（System.Windows.Media.GradientSpreadMethod枚舉）
                                    GradientSpreadMethod.Repeat - 相鄰填充區域，以 相同方向 重復漸變，直至填充滿整個剩余空間
                            -->
                            <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Repeat">
                                <GradientStop Color="Red" Offset="0.0" />
                                <GradientStop Color="Green" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
                </Grid>
            </StackPanel>
                
        </StackPanel>
    </Grid>
</Page>

Drawing/Brush.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
    
namespace XamlDemo.Drawing
{
    public sealed partial class Brush : Page
    {
        public Brush()
        {
            this.InitializeComponent();
        }
    
        private void webView_LoadCompleted_1(object sender, NavigationEventArgs e)
        {
            // WebView 加載完畢後重繪 WebViewBrush
            webViewBrush.Redraw();
        }
    }
}

OK

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar