[源码下载]

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

作者：webabcd

介绍
背水一战 Windows 10 之 绘图

  • Stroke - 笔划
  • Brush - 画笔

示例
1、演示“Stroke”相关知识点
Drawing/Stroke.xaml

  1. <Page
  2.     x:Class="Windows10.Drawing.Stroke"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:Windows10.Drawing"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.  
  10.     <Grid Background="Transparent">
  11.         <StackPanel Margin="10 0 10 10">
  12.  
  13.             <!--
  14.                 Stroke - 笔划（注：Stroke 属性是 Brush 类型）
  15.                     StrokeThickness - Stroke 的宽度
  16.             -->
  17.  
  18.             <!--
  19.                 StrokeDashArray - 虚线实体和虚线间隙的值的集合
  20.                     以本例为例：第1条实线长度2，第1条虚线长度4，第2条实线长度6，第2条虚线长度2，第3条实线长度4，第3条虚线长度6
  21.                     长度为 StrokeDashArray 乘以 StrokeThickness/2
  22.             -->
  23.             <Line X1="0" Y1="0" X2="1000" Y2="0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2 4 6" />
  24.  
  25.             <!--
  26.                 StrokeDashCap - 虚线两端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
  27.                     PenLineCap.Flat - 无。默认值
  28.                     PenLineCap.Round - 直径等于 StrokeThickness
  29.                     PenLineCap.Square - 高度等于 StrokeThickness 并且 宽度等于 StrokeThickness/2
  30.                     PenLineCap.Triangle - 底边长等于 StrokeThickness 的等腰直角三角形
  31.             -->
  32.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Flat" />
  33.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Round" />
  34.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Square" />
  35.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Triangle" />
  36.  
  37.             <!--
  38.                 StrokeStartLineCap - 虚线起始端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
  39.                 StrokeEndLineCap - 虚线终结端（线帽）的类型（System.Windows.Media.PenLineCap 枚举）
  40.             -->
  41.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" />
  42.  
  43.             <!--
  44.                 StrokeDashOffset - 虚线的起始点的偏移位置
  45.                     以下举例：画一条以虚线间隙为起始的虚线
  46.             -->
  47.             <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashOffset="10" />
  48.  
  49.             <!--
  50.                 StrokeLineJoin - 图形连接点处的连接类型（System.Windows.Media.PenLineJoin 枚举）
  51.                     StrokeLineJoin.Bevel - 线形连接
  52.                     StrokeLineJoin.Miter - 角形连接。默认值
  53.                     StrokeLineJoin.Round - 弧形连接
  54.             -->
  55.             <StackPanel Margin="0 30 0 0" Orientation="Horizontal">
  56.                 <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Bevel" />
  57.                 <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Miter" />
  58.                 <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Round" />
  59.             </StackPanel>
  60.  
  61.             <!--
  62.                 StrokeMiterLimit - 斜接长度（蓝色线部分）与 StrokeThickness/2 的比值。默认值 10，最小值 1
  63.             -->
  64.             <Grid Margin="0 30 0 0" HorizontalAlignment="Left">
  65.                 <Grid.ColumnDefinitions>
  66.                     <ColumnDefinition Width="120" />
  67.                     <ColumnDefinition Width="120" />
  68.                     <ColumnDefinition Width="120" />
  69.                 </Grid.ColumnDefinitions>
  70.  
  71.                 <Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" StrokeMiterLimit="1" />
  72.                 <Line Grid.Column="0" X1="50" Y1="10" X2="50" Y2="0" Stroke="Blue" />
  73.                 <Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Red" />
  74.  
  75.                 <Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" StrokeMiterLimit="2.0" />
  76.                 <Line Grid.Column="1" X1="50" Y1="10" X2="50" Y2="-10" Stroke="Blue" />
  77.                 <Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Red" />
  78.             </Grid>
  79.  
  80.         </StackPanel>
  81.     </Grid>
  82. </Page>

2、演示“Brush”相关知识点
Drawing/Brush.xaml

  1. <Page
  2.     x:Class="Windows10.Drawing.Brush"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:Windows10.Drawing"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.  
  10.     <Grid Background="Transparent">
  11.         <StackPanel Margin="10 0 10 10" HorizontalAlignment="Left">
  12.  
  13.             <!--
  14.                 Windows.UI.Xaml.Media.Brush - 画笔
  15.             -->
  16.  
  17.             <!--
  18.                 SolidColorBrush - 单色画笔
  19.                     Color - 颜色
  20.                         格式如下：
  21.                         预定义的Color的名称。如：Red, Green, Blue
  22.                         #RGB。如：#F00
  23.                         #ARGB（A为Alpha值）。如：#FF00, #F0F0, #F00F
  24.                         #RGB。如：#FF0000, #00FF00, #0000FF
  25.                         #ARGB（A为Alpha值）。如：#FFFF0000, #FF00FF00, #FF0000FF
  26.             -->
  27.             <Ellipse Margin="10" Width="200" Height="100" Stroke="Yellow" StrokeThickness="3" HorizontalAlignment="Left">
  28.                 <Ellipse.Fill>
  29.                     <SolidColorBrush Color="#88FF0000" />
  30.                 </Ellipse.Fill>
  31.             </Ellipse>
  32.  
  33.             <!--
  34.                 ImageBrush - 图像画笔
  35.                     ImageSource - 图片地址
  36.                     Stretch - 拉伸方式
  37.                     AlignmentX - 水平方向的对齐方式。Center（默认值）, Left, Right
  38.                     AlignmentY - 垂直方向的对齐方式。Center（默认值）, Top, Bottom
  39.             -->
  40.             <Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="1" HorizontalAlignment="Left" Margin="0 10 0 0">
  41.                 <Rectangle.Fill>
  42.                     <ImageBrush ImageSource="/Assets/Logo.png" AlignmentX="Right" AlignmentY="Bottom" Stretch="Fill" />
  43.                 </Rectangle.Fill>
  44.             </Rectangle>
  45.  
  46.             <WebView x:Name="webView" Source="http://webabcd.cnblogs.com" Width="300" Height="100" LoadCompleted="webView_LoadCompleted" HorizontalAlignment="Left" Margin="0 10 0 0" />
  47.             <!--
  48.                 WebView - 浏览器画笔
  49.                     SourceName - WebView 指向的 http 地址
  50.  
  51.                 注：如果需要显示 WebView 的最新结果，需要调用 WebViewBrush.Redraw() 方法
  52.             -->
  53.             <Rectangle Width="300" Height="100" Stroke="Red" HorizontalAlignment="Left" Margin="0 10 0 0">
  54.                 <Rectangle.Fill>
  55.                     <WebViewBrush x:Name="webViewBrush"  SourceName="webView"/>
  56.                 </Rectangle.Fill>
  57.             </Rectangle>
  58.  
  59.             <!--
  60.                 演示 LinearGradientBrush 如何使用（注：不支持 RadialGradientBrush）
  61.             -->
  62.             <StackPanel Orientation="Horizontal"  HorizontalAlignment="Left" Margin="0 10 0 0">
  63.                 <Grid>
  64.                     <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
  65.                         <Rectangle.Fill>
  66.                             <!--
  67.                                 LinearGradientBrush - 线性渐变画笔
  68.                                     StartPoint - 线性渐变的起点。默认渐变方向为对角线方向，默认值为左上角0,0
  69.                                     EndPoint - 线性渐变的终点。默认渐变方向为对角线方向，默认值为右下角1,1
  70.                                     GradientStop - 渐变中，过渡点的设置
  71.                                         Color - 过渡点的颜色
  72.                                         Offset - 过渡点的位置。相对于渐变线的比值。最小值0.0（默认值），最大值1.0
  73.                                     ColorInterpolationMode - 插入渐变颜色的方式（System.Windows.Media.ColorInterpolationMode 枚举）
  74.                                         ScRgbLinearInterpolation - scRGB
  75.                                         SRgbLinearInterpolation - sRGB。默认值
  76.                             -->
  77.                             <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" ColorInterpolationMode="SRgbLinearInterpolation">
  78.                                 <GradientStop Color="Red" Offset="0.0" />
  79.                                 <GradientStop Color="Green" Offset="0.25" />
  80.                                 <GradientStop Color="Blue" Offset="0.75" />
  81.                                 <GradientStop Color="Yellow" Offset="1.0" />
  82.                             </LinearGradientBrush>
  83.                         </Rectangle.Fill>
  84.                     </Rectangle>
  85.                     <Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
  86.                 </Grid>
  87.  
  88.                 <Grid Margin="10 0 0 0">
  89.                     <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
  90.                         <Rectangle.Fill>
  91.                             <!--
  92.                                 MappingMode - 指定线性渐变的起点（StartPoint）和终点（EndPoint）相对于输出区域是相对的还是绝对的（System.Windows.Media.BrushMappingMode 枚举）
  93.                                     MappingMode.RelativeToBoundingBox - 相对坐标。默认值
  94.                                     MappingMode.Absolute - 绝对坐标
  95.                             -->
  96.                             <LinearGradientBrush StartPoint="0,0" EndPoint="200,100" MappingMode="Absolute">
  97.                                 <GradientStop Color="Red" Offset="0.0" />
  98.                                 <GradientStop Color="Green" Offset="0.25" />
  99.                                 <GradientStop Color="Blue" Offset="0.75" />
  100.                                 <GradientStop Color="Yellow" Offset="1.0" />
  101.                             </LinearGradientBrush>
  102.                         </Rectangle.Fill>
  103.                     </Rectangle>
  104.                     <Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
  105.                 </Grid>
  106.  
  107.                 <Grid Margin="10 0 0 0">
  108.                     <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
  109.                         <Rectangle.Fill>
  110.                             <!--
  111.                                 SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
  112.                                     GradientSpreadMethod.Pad - 用线性渐变线末端的颜色值填充剩余空间。默认值
  113.                             -->
  114.                             <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Pad">
  115.                                 <GradientStop Color="Red" Offset="0.0" />
  116.                                 <GradientStop Color="Green" Offset="1.0" />
  117.                             </LinearGradientBrush>
  118.                         </Rectangle.Fill>
  119.                     </Rectangle>
  120.                     <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
  121.                 </Grid>
  122.  
  123.                 <Grid Margin="10 0 0 0">
  124.                     <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
  125.                         <Rectangle.Fill>
  126.                             <!--
  127.                                 SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
  128.                                     GradientSpreadMethod.Reflect - 相邻填充区域，以 相反方向 重复渐变，直至填充满整个剩余空间
  129.                             -->
  130.                             <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Reflect">
  131.                                 <GradientStop Color="Red" Offset="0.0" />
  132.                                 <GradientStop Color="Green" Offset="1.0" />
  133.                             </LinearGradientBrush>
  134.                         </Rectangle.Fill>
  135.                     </Rectangle>
  136.                     <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
  137.                 </Grid>
  138.  
  139.                 <Grid Margin="10 0 0 0">
  140.                     <Rectangle Width="200" Height="100" HorizontalAlignment="Left">
  141.                         <Rectangle.Fill>
  142.                             <!--
  143.                                 SpreadMethod - 线性渐变线（黑色线）之外， 输出区域之内的渐变方式（System.Windows.Media.GradientSpreadMethod枚举）
  144.                                     GradientSpreadMethod.Repeat - 相邻填充区域，以 相同方向 重复渐变，直至填充满整个剩余空间
  145.                             -->
  146.                             <LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Repeat">
  147.                                 <GradientStop Color="Red" Offset="0.0" />
  148.                                 <GradientStop Color="Green" Offset="1.0" />
  149.                             </LinearGradientBrush>
  150.                         </Rectangle.Fill>
  151.                     </Rectangle>
  152.                     <Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
  153.                 </Grid>
  154.             </StackPanel>
  155.  
  156.         </StackPanel>
  157.     </Grid>
  158. </Page>

Drawing/Brush.xaml.cs

  1. using Windows.UI.Xaml.Controls;
  2. using Windows.UI.Xaml.Navigation;
  3.  
  4. namespace Windows10.Drawing
  5. {
  6.     public sealed partial class Brush : Page
  7.     {
  8.         public Brush()
  9.         {
  10.             this.InitializeComponent();
  11.         }
  12.  
  13.         private void webView_LoadCompleted(object sender, NavigationEventArgs e)
  14.         {
  15.             // WebView 加载完毕后重绘 WebViewBrush
  16.             webViewBrush.Redraw();
  17.         }
  18.     }
  19. }

OK
[源码下载]

背水一战 Windows 10 (13) - 绘图: Stroke, Brush的更多相关文章

  1. 背水一战 Windows 10 (12) - 绘图: Shape, Path

    [源码下载] 背水一战 Windows 10 (12) - 绘图: Shape, Path 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Shape - 图形 Path - 路径 ...

  2. 背水一战 Windows 10 (27) - 控件（文本类）: TextBlock

    [源码下载] 背水一战 Windows 10 (27) - 控件(文本类): TextBlock 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBlock 示例 ...

  3. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  4. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  5. 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

    [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...

  6. 背水一战 Windows 10 (76) - 控件（控件基类）: Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

  7. 背水一战 Windows 10 (71) - 控件（控件基类）: UIElement - RenderTransform（2D变换）, Clip（剪裁）

    [源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...

  8. 背水一战 Windows 10 (70) - 控件（控件基类）: UIElement - Transform3D（3D变换）, Projection（3D投影）

    [源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...

  9. 背水一战 Windows 10 (60) - 控件（媒体类）: Pointer 涂鸦板, InkCanvas 涂鸦板

    [源码下载] 背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板 作者:webabcd 介绍背水一战 Windows 10 之 控件( ...

随机推荐

  1. Java NIO4：Socket通道

    Socket通道 上文讲述了通道.文件通道,这篇文章来讲述一下Socket通道,Socket通道与文件通道有着不一样的特征,分三点说: 1.NIO的Socket通道类可以运行于非阻塞模式并且是可选择的 ...

  2. Copy 与MutableCopy的区别

    NSString *string = @"origion"; NSString *stringCopy = [string copy]; NSMutableString *stri ...

  3. [ASP.NET Web API]如何Host定义在独立程序集中的Controller

    通过<ASP.NET Web API的Controller是如何被创建的?>的介绍我们知道默认ASP.NET Web API在Self Host寄宿模式下用于解析程序集的Assemblie ...

  4. web应用中使用JavaMail发送邮件

    现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...

  5. 谈谈JAR

    JAR(Java Archive File) JAR 文件格式以流行的 ZIP 文件格式为基础. 与 ZIP 文件不同的是,JAR 文件不仅用于压缩和发布,而且还用于部署和封装库.组件和插件程序,并可 ...

  6. Linux线程体传递参数的方法详解

    传递参数的两种方法 线程函数只有一个参数的情况:直接定义一个变量通过应用传给线程函数. 例子 #include #include using namespace std; pthread_t thre ...

  7. Sql Server系列：触发器

    触发器的一些常见用途: ◊ 强制参照完整性 ◊ 常见审计跟踪(Audit Trails):这意味着写出的记录不仅跟踪大多数当前的数据,还包括对每个记录进行实际修改的历史数据. ◊ 创建与CHECK约束 ...

  8. 关于xcode导出设置中的一些概念

    Development Certificates:在电脑通过秘钥串生成一个私人秘钥,这就是:CertificateSigningRequest.certSigningRequest 简称CSR,团队中 ...

  9. javascript 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. 用扩展开发一个PHP类

    原文:http://my.oschina.net/mickelfeng/blog/122519?p=1 假设我们要用PHP扩展实 现一个类Person,它有一个private的成员变量$_name和两 ...