WPF 常用path示例

Demo在这里，不想看文章就下载吧

http://files.cnblogs.com/xiaokang088/WpfPathExample.zip

Basic Path

大写的 M 指示 startPoint 是绝对值；小写的 m 指示 startPoint 是相对于上一个点的偏移量，如果是 (0,0)，则表示不存在偏移。 当您在移动命令之后列出多个点时，即使您指定的是线条命令，也将绘制出连接这些点的线。 如 M 10,50 200,400

 

创建方法：

     <Path  Stroke="Green" StrokeThickness="3"  Data="M 10,50 200,400" />

 

        <Path  Stroke="Gold" StrokeThickness="3" >

            <Path.Data>

                <PathGeometry>

                    <PathFigure StartPoint="200,200">

                        <PathFigure.Segments  >

                            <LineSegment   Point="400,100"/>

                        </PathFigure.Segments>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

 

            #region create method 1

            Path path = new Path();

            PathGeometry pathGeometry = new PathGeometry();

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(400, 300);

            PathSegmentCollection segmentCollection = new PathSegmentCollection();

            segmentCollection.Add(new LineSegment() { Point = new Point(600, 100) });

            pathFigure.Segments = segmentCollection;

            pathGeometry.Figures = new PathFigureCollection() { pathFigure };

            path.Data = pathGeometry;

            path.Stroke = new SolidColorBrush(Colors.BlueViolet);

            path.StrokeThickness = 3;

            main.Children.Add(path);

            #endregion

 

            #region create method2

            Path pp = new Path();

            pp.Stroke = new SolidColorBrush(Colors.Blue);

            pp.StrokeThickness = 3;

            StreamGeometry geometry = new StreamGeometry();

            geometry.FillRule = FillRule.Nonzero; //声前F0还是F1,现在是F1

            using (StreamGeometryContext ctx = geometry.Open())

            {

                ctx.BeginFigure(new Point(30, 60), true, true);

                ctx.LineTo(new Point(150, 600), true, false);

            }

            geometry.Freeze();

            pp.Data = geometry;

            main.Children.Add(pp);

            #endregion

 

            #region create method3

            Path pp3 = new Path();

            //pp3.Data

            pp3.Stroke = new SolidColorBrush(Colors.Red);

            pp3.StrokeThickness = 3;

            GeometryConverter gc = new GeometryConverter();

            pp3.Data = (Geometry)gc.ConvertFromString("M 20,30 500,100");

            main.Children.Add(pp3);

            #endregion

Bezier 三次方贝塞尔曲线

三次方贝塞尔曲线命令

通过使用两个指定的控制点（controlPoint1 和 controlPoint2）在当前点与指定的终点之间创建一条三次方贝塞尔曲线。

                   M 40,300  C 560,40 300,430 750,400

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；

这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的 长度有多长 。

<Path  Stroke="BlueViolet" StrokeThickness="3">

            <Path.Data>

                <PathGeometry>

                    <PathFigure StartPoint="10,10">

                        <BezierSegment Point1="260,40" Point2="400,430" Point3="700,300"  IsSmoothJoin="True"/>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

</Path>

<Path  Stroke="Red" StrokeThickness="3"  Data="M 40,300  C 560,40 300,430 750,400" />

以下的折线为正常的线，曲线为贝塞尔曲线

Bezier 平滑的三次方贝塞尔曲线

在当前点与指定的终点之间创建一条三次方贝塞尔曲线。 第一个控制点假定为前一个命令的第二个控制点相对于当前点的反射。 如果前一个命令不存在，或者前一个命令不是三次方贝塞尔曲线命令或平滑的三次方贝塞尔曲线命令，则假定第一个控制点就是当前点。 第二个控制点，即曲线终端的控制点，由 controlPoint2 指定。 例如，<Path  Stroke="Red" StrokeThickness="3"  Data="M 40,300  S 560,40 300,430 " />

以下的折线为正常的线，曲线为贝塞尔曲线

 

 

水平线或者垂直线

        <Path Data="m 0,200 h 800"  Stroke="Violet"  StrokeThickness="3"/>

        <Path Data="m 400,10 v 400"  Stroke="Violet"  StrokeThickness="3"/>

二次方贝塞尔曲线

二次贝塞尔曲线命令 

通过使用指定的控制点 (controlPoint) 在当前点与指定的终点之间创建一条二次贝塞尔曲线。 q 100,200 300,200 是有效的二次贝塞尔曲线命令示例。

  <Path  Stroke="BlueViolet" StrokeThickness="3">

            <Path.Data>

                <PathGeometry>

                    <PathFigure StartPoint="10,10">

                        <QuadraticBezierSegment Point1="260,40" Point2="400,430"   IsSmoothJoin="True"/>

                    </PathFigure>

                </PathGeometry>

 

            </Path.Data>

        </Path>

        <Path  Stroke="Red" StrokeThickness="3"  Data="M 40,300 Q 260,140 300,430 " />

平滑的二次方贝塞尔曲线

平滑二次贝塞尔曲线命令

在当前点与指定的终点之间创建一条二次贝塞尔曲线。 控制点假定为前一个命令的控制点相对于当前点的反射。 如果前一个命令不存在，或者前一个命令不是二次贝塞尔曲线命令或平滑的二次贝塞尔曲线命令，则此控制点就是当前点。

        <Path  Stroke="Red" StrokeThickness="3"  Data="M 40,300 T 260,140 300,430 " />

 

椭圆弧线

椭圆弧线命令在当前点与指定的终点之间创建一条椭圆弧线。

<Path  Stroke="Black" StrokeThickness="3"   HorizontalAlignment="Center" >

            <Path.Data>

                <PathGeometry>

                    <PathFigure>

                        <PathFigure.Segments>

                            <ArcSegment   Point="400,300"  RotationAngle="180"

                                         Size="10,10"  >

                            </ArcSegment>

                        </PathFigure.Segments>

                    </PathFigure>

                </PathGeometry>

            </Path.Data>

        </Path>

一条或多条三次方贝塞尔曲线

PolyBezierSegment

使用 PathFigure 对象存储 PolyBezierSegment 对象和其他线段。

 

一条三次方贝塞尔曲线由四个点来定义：一个起点、一个终点和两个控制点。PolyBezierSegment 通过将 Points 属性设置为点集合来指定一条或多条三次方贝塞尔曲线。对于集合中的每三个点，第一个点和第二个点指定曲线的两个控制点，第三个点指定终点。请注意，未指定曲线的起点，因为曲线的起点与最后一条线段的终点是同一个点。如果您要指定所有三个点（一条贝塞尔曲线），可以使用 BezierSegment，将这三个点的值指定为 Point1、Point2 和 Point3。

 

三次方贝塞尔曲线的两个控制点的作用像磁铁一样，朝着自身的方向吸引本应为直线的部分，从而形成一条曲线。第一个控制点影响曲线的开始部分；第二个控制点影响曲线的结束部分。注意，曲线不一定必须通过两个控制点之一；每个控制点将直线的一部分朝着自己的方向移动，但不通过自身。

 

PolyBezierSegment 实质上可以有无限个控制点，这些点和终点的值作为 Points 属性值提供

       <Path Stroke="Red" StrokeThickness="3" >

                <Path.Data>

                    <PathGeometry >

                        <PathFigure StartPoint="10,20">

                            <PolyBezierSegment Points="0,0 200,0 300,100 300,0 400,0 600,100" />

                        </PathFigure>

                    </PathGeometry>

                </Path.Data>

            </Path>

 

 

表示一系列二次贝塞尔线段。

PolyQuadraticBezierSegment

表示一系列二次贝塞尔线段。

一个 QuadraticBezierSegment 对象可以有一个控制点和一个终点。一个 PolyQuadraticBezierSegment 对象实质上可以有无限个控制点，这些点和终点的值作为 Points 属性值提供。各个点是从 Points 字符串分析得来的。

        <Path Stroke="Black" StrokeThickness="3" >

                <Path.Data>

                    <PathGeometry >

                        <PathFigure     >

                            <PolyQuadraticBezierSegment Points="200,200 300,100 0,200 30,400" />

                        </PathFigure>

                    </PathGeometry>

                </Path.Data>

            </Path>

 

终于结束了，我数学不咋好，看的头都大了。