重新想象 Windows 8 Store Apps 之 绘图: 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();         }     } }