如何使用贝塞尔函数制作曲线流畅的钢笔工具答案

【问题标题】：How to make a pen tools which the curve go smoothly using beizer function如何使用贝塞尔函数制作曲线流畅的钢笔工具
【发布时间】：2016-05-21 05:54:06
【问题描述】：

我在编写 beizer 函数时遇到问题。我用 c# 写了一个简单的代码：

public static PointF[] BeizerFunction (int interval, PointF point0, PointF point1, PointF point2) {
        //x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
        //y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;
        var Points = new PointF[interval];
        var time = 1.0f / (float) interval;

        for (var i=0; i<Points.Length; i++) {
            var point = Points [i];

            point = new PointF ();
            point.X = (1 - time) * (1 - time) * point0.X
                + 2 * (1 - time) * time * point1.X
                + time * time * point2.X;
            point.Y = (1 - time) * (1 - time) * point0.Y
                + 2 * (1 - time) * time * point1.Y
                + time * time * point2.Y;

            Points [i] = point;
            time ++;
        }

        return Points;
    }

通过应用程序监听鼠标移动，所以我猜鼠标指针将是这个函数的控制点。如果正确，上面的代码应该给我一个来自三个点的贝泽曲线。

实际上，有多条曲线，所以会有超过 3 个点。要将 beize 曲线连接在一起，我会这样做。

Bezier(p0.5, p1, p1.5);
Bezier(p1.5, p2, p2.5);
Bezier(p2.5, p3, p3.5);

只画3个点的c#代码是这样的

var p0 = new PointF (50, 50);
        var p1 = new PointF (100, 100);
        var p2 = new PointF (150, 50);

        var points = QuadraticBezierFunction.BeizerFunction (100, p0, p1, p2);

        for (var i=0; points != null && i<points.Length-1; i=i+1)
            canvas.DrawLine (points[i].X, points[i].Y, points[i+1].X, points[i+1].Y, new Android.Graphics.Paint ());

当我尝试绘制曲线时，它看起来不像曲线。

【问题讨论】：

您的目标是什么：Winforms、WPF、ASP..？总是正确标记您的问题！ - 另外：我希望您不要使用 all 从 mousemove 获得的那么多点来构建贝塞尔曲线，因为整点（或一个主要点）是您只需要 非常很少 来创建漂亮的曲线。
不要使用二次贝塞尔曲线，而是使用三次曲线（4 个控制点）。二次贝塞尔曲线（3 个控制点）真的很难加入令人愉快的结果（您需要拟合）。使用立方体，您不需要任何它，只需按正确的顺序使用点。见stackoverflow.com/a/30438865/2521214 我也认为这是你的目标stackoverflow.com/a/30750626/2521214
感谢 Spektre。你的意思是使用 Cubics 我只需要应用这样的东西：Cubic(p0,p1,p2,p3) 然后 Cubic (p3, p4, p5, p6)。抱歉，我对数学的理解非常有限。
TaW - 我不是针对任何特定平台的...在我使用 java quadTo 完成这项工作之前，但我需要将它应用到其中一个库上，但它们没有相同的函数，所以我必须创建自己的贝塞尔算法。感谢您的建议。我会先尝试多点版本，并在以后的版本中对点进行采样。
“时间++;”您的代码中的声明似乎不正确。

标签： c# math bezier cubic

【解决方案1】：

根据@fang 的观察，不要使用time ++;，因为您不想从 0.xyz 变为 1.xyz，而是希望以小数递增。 Bezier 函数仅对介于 0 和 1（含）之间的时间参数“起作用”（即，用于通常的图形目的），因此您希望从 time=0; 开始，用一些小的 @ 迭代多次987654323@，停一次time>=1+step。

（然后，除非您非常幸运，否则您可能需要手动为 time=1 添加一个最终点，以保证您是正确的端点）

【讨论】：