如何根据我绘制的路径和几个点绘制贝塞尔曲线路径?

时间:2017-12-11 01:31:58

标签: c# path bezier

嗨。我想根据现有的蓝色曲线路径绘制红色曲线路径。Refer this diagram我尝试使用Bezier in-code构建红色路径。以下是我的代码。

这是我定义和传递我的点数的地方。

  newFinal.Insert(0, nodeBegin); //add in starting node at beginning drawing purpose
        Point[] AToB = new[] { new Point(48, 242), new Point(-35, 250), new Point(48, 350) };
        Point[] AToE = new[] { new Point(48, 242), new Point(150, 240), new Point(135, 245) };
        Point[] BToG = new[] { new Point(48, 350), new Point(150, 240), new Point(135, 340) };
        Point[] BToA = new[] { new Point(48, 350), new Point(-35, 250), new Point(48, 242) }; 
        Point[] EToA = new[] { new Point(135, 245), new Point(150, 240), new Point(48, 242) };
        Point[] GToB = new[] { new Point(135, 340), new Point(105, 370), new Point(48, 350) };

  for (i = 0; i < newFinal.Count - 1; i++)
        {
            switch (newFinal[i])
            {
                case 'a':
                    if (newFinal[i + 1] == 'b')
                        drawBezier(AToB[0], AToB[1],AToB[2]);
                    else if (newFinal[i + 1] == 'e')
                        drawBezier(AToE[0], AToE[1], AToE[2]);
                    break;


                case 'b':
                    if (newFinal[i + 1] == 'a')
                        drawBezier(BToA[0], BToA[1], BToA[2]);
                    else if (newFinal[i + 1] == 'g')
                        drawBezier(BToG[0], BToG[1], BToG[2]);
                    break;

                case 'e':
                    if (newFinal[i + 1] == 'a')
                        drawBezier(EToA[0], EToA[1], EToA[2]);
                    break;

                case 'g':
                    if (newFinal[i + 1] == 'b')
                        drawBezier(GToB[0], GToB[1], GToB[2]);
                        break;
              }
          }

这是我通过积分的地方:

private void drawBezier(Point point1, Point point2, Point point3) //This is the class to draw the blue curve path
    {

        BezierSegment bezier = new BezierSegment()
        {
            Point1 = point1,
            Point2 = point2,
            Point3 = point3,
            IsStroked = true
        };

        PathFigure figure = new PathFigure();
        figure.Segments.Add(bezier);

        Path path = new Path();
        path.Stroke = Brushes.Red;
        path.Data = new PathGeometry(new PathFigure[] { figure });

        MyCanvas.Children.Add(path);


        Storyboard sb = new Storyboard();
        PointAnimation pointAnim = new PointAnimation();
        pointAnim.From = bezier.Point1;
        pointAnim.To = bezier.Point3;
        Storyboard.SetTarget(pointAnim,path);
        Storyboard.SetTargetProperty(pointAnim,new PropertyPath("Data.Figures[2].Segments[2].Point3"));
    }

然而,红色路径以奇怪的曲线绘制。例如,当我想绘制a到b时,this happened另一个例子,将g绘制成b,this happened它就像曲线无法从第1点绘制。任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

BezierSegment对象实际上是一个三次贝塞尔曲线,需要4个点才能完全定义。 BezierSegment的Point1,Point2和Point3属性用于第一个控制点,第二个控制点和终点。三次贝塞尔曲线的起点是路径对象的“当前点”。因此,您应该将PathFigure的StartPoint属性设置为您希望立方贝塞尔曲线开始的位置。