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

【问题标题】：How to draw bezier curve path based on path i have drawn and several points?如何根据我绘制的路径和几个点绘制贝塞尔曲线路径？
【发布时间】：2023-07-31 03:37:01
【问题描述】：

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

这是我定义和传递我的积分的地方。

  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就好像曲线不能从第一个点开始画一样。谁能帮帮我？

【问题讨论】：

标签： c# path bezier

【解决方案1】：

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

【讨论】：