重新想象 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 (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
[源码下载]

目录
相关文章
|
2月前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
2月前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
2月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
2月前
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
|
2月前
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
|
2月前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
|
2月前
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
|
2月前
|
存储 Linux Windows
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
|
2月前
|
应用服务中间件 nginx Windows
【Azure 应用服务】在App Service for Windows中实现反向代理
【Azure 应用服务】在App Service for Windows中实现反向代理
|
2月前
|
网络协议 Linux 网络安全
【Azure 应用服务】更便捷的方式抓取Azure App Service for Windows的网络包
【Azure 应用服务】更便捷的方式抓取Azure App Service for Windows的网络包