WPF（Windows10通用应用程序开发）- 图形绘画

图形基础属性：

　　　　　　Stroke：线段颜色（图形边界颜色）

　　　　　　StrokeThickness：线段粗细（图形边框宽度）

　　　　　　Fill：画刷，图形的背景眼色

　　　　　　Stretch：拉升值（Emun类型）

　　　　　　　　·None：内容保持原有大小

　　　　　　　　·Fill：填充目标尺寸（不保留原有横纵比例）

　　　　　　　　·Uniform：适应目标尺寸（保留原有横纵比例）

　　　　　　　　·UniformToFill：填充目标尺寸（保留原有横纵比例）

基础的图形形状（Shape类）：

　　1.线段：Line

　　　属性：X1、Y1：线段起点坐标

　　　　　　X2、Y2：线段终点坐标

　　　　　　·StrokeDashArray：虚线的间隙值得集合

　　　　　　　　例： <Line X1="10" Y1="140" X2="260" Y2="140" StrokeDashArray="5,5,3,5" Stroke="Black" StrokeThickness="1"/>

　　　　　　·线帽类型：

 　　　　　   StrokeLineJoin（虚线两端的线帽类型）、StrokeStartLineCap（虚线起始的线帽类型）、StrokeEndLineCap（虚线末端的线帽类型）：

　　　　　　　　枚举类型，枚举值：

　　　　　　　　　　·Round：线帽为直径=直线粗细的半圆形

　　　　　　　　　　·Square：线帽为高度=直线粗细、长度=直线粗细一半的矩形

　　　　　　　　　　·Flat：无线帽，未超出直线上最后一个点的线帽

　　　　　　StrokeLineJoin：虚线起始位置

　　　　例：<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Block" StrokeThickness="10"/>

　　　　　　StrokeLineJoin：连接点处的连接类型

　　　　　　　　枚举值： Round：圆角顶点

　　　　　　　　　　　　 Bevel：斜角顶点

　　　　　　　　　　　　 Miter：常规角顶点

　　　　　　StrokeMiterLimit：斜接长度与StrokeThickness/2的比值。值 >= 1;

　　2.矩形：Rectangle

　　　　RadiusY/RadiusX：圆角矩形的x轴半径和Y轴半径

　　　　例： <Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" Fill="Red"/>

　　3.椭圆：Ellipse。。。。。略；

　　4.开放多边形（Polyline）和封边多边形（Polygon）：

　　　　　　属性Points：点结构数组（Points[0]/Points[1]第一个起点，Points[1] / Points[2]作为第二个起点，以此类推）

　　　　例：<Polygon Points="10,110,60,10,110,110" Stroke="Yellow" StrokeThickness="5"/>//封闭式

　　　　　　<Polyline Points="10,110,60,10,110,110" Margin="100" Stroke="Yellow" StrokeThickness="5"/>//开口式

　　实例（利用line控件制作画图工具）： 

       xaml：

 <Canvas x:Name="ContentPanelCanvas" Background="Transparent" MouseMove="ContentPanelCanvas_MouseMove" MouseLeftButtonDown="ContentPanelCanvas_MouseLeftButtonDown"  ></Canvas>

       C#：

  public MainWindow()
        {
            InitializeComponent();
        }

        private Point currentPoint;
        private Point oldPoint;

        private void ContentPanelCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            currentPoint = e.GetPosition(ContentPanelCanvas);//获得鼠标针位置

            Line line = new Line() { X1 = currentPoint.X, X2 = oldPoint.X, Y1 = currentPoint.Y, Y2 = oldPoint.Y };

            line.Stroke = new SolidColorBrush(Colors.Red);
            line.StrokeThickness = 5;
            line.StrokeLineJoin = PenLineJoin.Round;
            line.StrokeStartLineCap = PenLineCap.Round;
            line.StrokeEndLineCap = PenLineCap.Round;

            ContentPanelCanvas.Children.Add(line);
            oldPoint = currentPoint;
        }

        private void ContentPanelCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            currentPoint = e.GetPosition(ContentPanelCanvas);
            oldPoint = currentPoint;
        }

Path图形（Geometry类）：

　　直线几何图形（LineGeometry）：通过直线的起点和终点来定义

　　矩形几何图形（RectangleGeometry）：通过Rect结构定义，指定矩形相对位置、高度、和宽度

　　椭圆几何图形（EllipseGeometry）：通过中心点、x半径和y半径定义

　　路径几何图形（PathGeometry）：可以绘制任何几何图形

　　几何图形组（GeometryGroup）：由多个几何图形组在一起

　　实例【简单几何图形】：

    <StackPanel>
        <!--LineGeomentry 直线几何图形-->
        <Path Stroke="red" StrokeThickness="5">
            <Path.Data>
                <LineGeometry StartPoint="0,0" EndPoint="400,20"/>
            </Path.Data>
        </Path>
        <!--RectangleGeometry矩形几何图形（路径）-->
        <Path Fill="Yellow">
            <Path.Data>
                <RectangleGeometry Rect="10,10,400,50"/>
            </Path.Data>
        </Path>
        <!--EllipseGeometry椭圆几何图形-->
        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry RadiusX="20" RadiusY="20" Center="50,30"/>
            </Path.Data>
        </Path>
        <!--GeometryGroup组合几何图形-->
        <Path Fill="Brown">
            <Path.Data>
                <GeometryGroup FillRule="EvenOdd"><!--FillRule：交叉的地方是否显示为白色（EvenOdd显示，Nonzero：不显示）-->
                    <RectangleGeometry Rect="10,10,350,50"/>
                    <EllipseGeometry RadiusX="50" RadiusY="30" Center="370,35"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
        <!--GeometryGroup组合几何图形-->
        <Path Fill="Pink">
            <Path.Data>
                <GeometryGroup FillRule="Nonzero">
                    <RectangleGeometry Rect="10,10,350,50"/>
                    <EllipseGeometry RadiusX="50" RadiusY="30" Center="370,35"/>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </StackPanel>

 　　·使用PathGeometry创建Path：

　　　　重点集合：PathFigure对象集合

　　　　　　PathFigure由一个或多个PathSegment对象组成：[ Path -> Path.Data -> PathGeometry -> PathGeometry.Figuress -> PathFiguress -> PathFiguress.Segments ]

　　　　　　　　ArcSegment：在两个点之间创建一条椭圆弧线

　　　　　　　　BezierSegment：在两个点之间创建一条三次方贝塞尔曲线

　　　　　　　　LineSegment：在两个点之间创建一条直线

　　　　　　　　PolyBezierSegment：创建一系列三次方贝塞尔曲线

　　　　　　　　PolyLineSegment：创建一系列直线

　　 　　　　　  PolyQuadraticBezierSegment：创建一系列二次贝塞尔曲线

　　　　　　　　QuqdraticBezierSegment：创建一条二次贝塞尔曲线

　　　　PolyLineSegment 与 LineSegment 实例：

 <StackPanel>
        <Path Stroke="Blue" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="10,20">
                            <PathFigure.Segments>
                                <LineSegment Point="300,80"></LineSegment>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Blue" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="10,20">
                            <PathFigure.Segments>
                                <PolyLineSegment Points="300,80,300,200,12,21"></PolyLineSegment>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </StackPanel>

 　　　　ArcSegment 绘制圆弧：

 　　　　属性：Point：圆弧连接终点

　　　　　　　Size：圆弧(x[横轴半径],y[纵轴半径])

　　　　　　    SweepDirection：顺时针[Clockwise]，逆时针[Counterclockwise]

　　　　　　　RotationAngle：圆弧旋转角度

　　　　　　　IsLargeArc：大圆弧[true]，小圆弧[false]　　

 <Path Stroke="Blue" StrokeThickness="5"><!--创建一个半圆弧-->
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="100,100">
                    <PathFigure.Segments>
                        <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="True" 
                                    SweepDirection="Clockwise" Point="300,150"/>
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

　　　　　BezierSegment[创建一条三次方贝塞尔曲线]、PolyBezierSegment[创建一系列三次方贝塞尔曲线] ----

　　　　　----PolyQuadraticBezierSegment[创建一条二次方贝塞尔曲线]、QuadraticBezierSegment[创建一系列二次方贝塞尔曲线]：

 　　　　 属性：Point1/Point2/[Point3]：定义点[包括起点、终点和控制点]（一条贝塞尔）

　　　　　　　  Points=""：定义点（一系列贝塞尔）

 　　　　实例：

　　　　

    <StackPanel>
        <Path Stroke="Red" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,20">
                        <PathFigure.Segments>
                            <BezierSegment Point1="100,0" Point2="150,150" Point3="300,80"/>
                        </PathFigure.Segments>
                    </PathFigure>     
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Yellow" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,20">
                        <PathFigure.Segments>
                            <PolyBezierSegment Points="0,0 100,0 150,100 150,0 150,0 300,100 300,100 350,0 400,150"/>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Blue" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,20">
                        <PathFigure.Segments>
                            <QuadraticBezierSegment Point1="150,150" Point2="180,80"/>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Blue" StrokeThickness="5">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,20">
                        <PathFigure.Segments>
                            <PolyQuadraticBezierSegment Points="200,200 300,100 0,200 30,100" />
                        </PathFigure.Segments>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </StackPanel>

 　　使用路径标记法创建Path：（详细路径标记语法命令请参考：https://msdn.microsoft.com/zh-cn/library/ms752293.aspx或者百度：路径标记语法）

　　 如：<Path Stroke="Green" StrokeThickness="5" Data="M 20,20 S 100,200 700,0"/><!--创建一条平滑的曲线-->

　　【注意：小写为相对位置，大写为绝对位置】

　　移动命令：M/m　　M x,y 或 m x,y　　如建立一个起点

　　直线：L/l　　L x,y 或 l x,y　　如：L(100,200)

　　水平直线：H/h　　H x 或 h x　　如：H 200 表示从当前点到x为200的水平直线（绝对位置）

　　垂直直线：V/v　　V y 或 v y　　如：v 100 表示从当前点到y为100的垂直直线（相对位置）

　　三次方程式贝塞尔曲线：C/c　　C x,y x,y x,y 或 c x,y x,y x,y　C 第一个控制点.第二个控制点,结束点　　如：C 100,200 200,400 300,200

　　二次方程式贝塞尔曲线：Q/q　　Q x,y x,y 或 q x,y x,y   Q 控制点，结束点　　如：Q 100,200 300,200

　　平滑三次方程式贝塞尔曲线：S/s　　S x,y x,y 或 s x,y x,y   S 控制点，结束点　　如：S 100,200 200,300

　　平滑二次方程式贝塞尔曲线：T/t　　T x,y x,y 或 t x,y x,y   T 控制点 结束点　　如：t 100,200 200,300

　　椭圆圆弧：A/a　　A x,y r r L s x,y　　A 横轴半径，纵轴半径  旋转角度  圆弧旋转角度值 优势弧标记(0/1 弧角度>180°用1，否则用0)  正负角度标记（1/0 正角方向用1，否则为0） 结束点

　　　　　　　　　　　　　　　　　　如：A 5,5 0 0 1 10,10

　　关闭指令：Z/z　　线条收尾连接

　　fillRule填充规则：F0[EvenOdd]/F1[Nonzero]

　　　　　　　　　　如：<Path Stroke="Green" StrokeThickness="5" Data="F0 M 20,20 S 100,200 700,0"/>