重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
原文:
重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
作者：webabcd
介绍
重新想象 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
[源码下载]