背水一戰 Windows 10 (13) - 繪圖: Stroke, Brush
作者：webabcd
介紹
背水一戰 Windows 10 之 繪圖
- Stroke - 筆划
- Brush - 畫筆
示例
1、演示“Stroke”相關知識點
Drawing/Stroke.xaml
<Page x:Class="Windows10.Drawing.Stroke" 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"> <!-- Stroke - 筆划（注：Stroke 屬性是 Brush 類型） StrokeThickness - 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>
2、演示“Brush”相關知識點
Drawing/Brush.xaml
<Page x:Class="Windows10.Drawing.Brush" 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.Media.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" 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> <!-- 演示 LinearGradientBrush 如何使用（注：不支持 RadialGradientBrush） --> <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 Windows10.Drawing { public sealed partial class Brush : Page { public Brush() { this.InitializeComponent(); } private void webView_LoadCompleted(object sender, NavigationEventArgs e) { // WebView 加載完畢后重繪 WebViewBrush webViewBrush.Redraw(); } } }
OK
[源碼下載]