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 类型)
--> <!--
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();
}
}
}

绘图: Stroke, Brush的更多相关文章

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

    [源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...

  2. 重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush

    原文:重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush [源码下载] 重新想象 Windows 8 Store Apps ...

  3. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  4. 《Programming WPF》翻译 第7章 2.图形

    原文:<Programming WPF>翻译 第7章 2.图形 图形时绘图的基础,代表用户界面树的元素.WPF支持多种不同的形状,并为它们每一个都提供了元素类型. 7.2.1基本图形类 在 ...

  5. 我(webabcd)的文章索引

    [最后更新:2014.08.28] 重新想象 Windows Store Apps 系列文章 重新想象 Windows 8 Store Apps 系列文章 重新想象 Windows 8 Store A ...

  6. Windows 8 Store Apps

    重新想象 Windows 8 Store Apps 系列文章索引 Posted on 2013-11-18 08:33 webabcd 阅读(672) 评论(3) 编辑 收藏 [源码下载] 重新想象 ...

  7. Kinect 开发 —— 骨骼追踪

    骨骼追踪技术通过处理景深数据来建立人体各个关节的坐标,骨骼追踪能够确定人体的各个部分,如那部分是手,头部,以及身体.骨骼追踪产生X,Y,Z数据来确定这些骨骼点.骨骼追踪系统采用的景深图像处理技术使用更 ...

  8. ]Kinect for Windows SDK开发入门(六):骨骼追踪基础 上

    原文来自:http://www.cnblogs.com/yangecnu/archive/2012/04/06/KinectSDK_Skeleton_Tracking_Part1.html Kinec ...

  9. C#屏幕截图

    今天通过C#来实现一个简单的屏幕截图功能.实现思路,获取鼠标按下去的位置和鼠标左键释放的位置,计算这个区域的宽度和高度.然后通过 Graphics.CopyFromScreen 方法便可以获取到屏幕截 ...

随机推荐

  1. [No00001D]解决5个问题,马上开口说英语

  2. java 28 - 4 JDK5的新特性 之 枚举的概述和自定义枚举类

    枚举 枚举概述 是指将变量的值一一列出来,变量的值只限于列举出来的值的范围内.举例:一周只有7天,一年只有12个月等. 回想单例设计模式:单例类是一个类只有一个实例 那么多例类就是一个类有多个实例,但 ...

  3. java 24 - 6 GUI之 创建只能输入数字的文本框

    需求: 创建一个含有标签和文本框的窗体,其中文本框只能输入数字 步骤:(大致上) 创建窗体对象 创建标签对象 创建文本框对象 把组件添加到窗体中 设置标签的监听事件,对键盘按下的数据进行监听 设置窗体 ...

  4. mysql线上一个定时备份脚本

    数据库服务使用的是阿里云的mysql,远程进行定时的全量备份,备份到本地,以防万一.mysql数据库远程备份的数据最好打包压缩: [root@huanqiuPC crontab]# pwd/Data/ ...

  5. nginx访问白名单设置以及根据$remote_addr分发

    在日常运维工作中,会碰到这样的需求:设置nginx的某个域名访问只对某些ip开放,其他ip的客户端都不能访问.达到这样的目的一般有下面两种设置方法:(1)针对nginx域名配置所启用的端口(一般是80 ...

  6. javascript中使用循环链表实现约瑟夫环问题

    1.问题 传说在公元1 世纪的犹太战争中,犹太历史学家弗拉维奥·约瑟夫斯和他的40 个同胞被罗马士兵包围.犹太士兵决定宁可自杀也不做俘虏,于是商量出了一个自杀方案.他们围成一个圈,从一个人开始,数到第 ...

  7. 借个例子说明sed的模式空间,以及针对模式空间的N,P,D用法

    下面是我们要处理的文本:题目要求是把所有散列在不同行的同一个中括号中的数据集中在一起, 见下表就秒懂了吧 处理前的文本 处理后的文本 [123456][ASDEF][ABCD123WF][789ADC ...

  8. Linux socket多进程服务器框架二

    客户端未解决Bug:子进程或者父进程退出的时候,我无法做到两个进程都调用clt_socket_Destory()方式释放socket句柄, 但是进程退出后,相应的资源也会释放,有一定影响,但是不大,以 ...

  9. httpserver

    改了下 # -*- coding:utf-8 -*- from BaseHTTPServer import HTTPServer, BaseHTTPRequestHandler HOST = &quo ...

  10. spring: 加载远程配置

    通常在spring应用中,配置中的properties文件,都是打包在war包里的,部署规模较小,只有几台服务器时,这样并没有什么大问题.如果服务器多了,特别是集群部署时,如果要修改某一项配置,得重新 ...