背水一战 Windows 10 (13) - 绘图: Stroke, Brush

时间：2021-10-19 20:20:30

[源码下载]

背水一战 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
[源码下载]

相关文章