posts - 455, comments - 9781, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

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

Posted on 2013-04-11 09:15 webabcd 阅读(...) 评论(...) 编辑 收藏

[源码下载]


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