如何将curveTo()转换为点列表？

Question

以下是使用curveTo()绘制曲线的AS3代码：

var line:Shape = new Shape();

line.x = line.y = 20;
line.graphics.lineStyle(2, 0xFF0000);
line.graphics.curveTo(200, 200, 200, 0);

addChild(line);

结果图像如下：

现在我想让某物能够沿着这条路径移动；我该如何将这个图形转换为坐标列表？我很难掌握任何高级数学知识，但我假设curveTo()使用某种明显的公式创建上面的图形，我可以复制并修改它以创建所需的列表。

最终结果可能看起来像这样（假设点之间的偏移量大约是5px）。

Vector.<Point> = [
    new Point(20, 20),
    new Point(23, 23),
    new Point(27, 28),
    new Point(33, 32),
    new Point(40, 37)
    /* ...etc... */
];

结果将用于创建沿以下路径移动的抛射物的雨等事物，例如：

- Marty

---

你也应该查看这个人的博客：http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/，我用它来做这个。 - turbosqel

Answer 1

通过阅读ActionScript文档，我了解到ActionScript中的curveTo方法可以生成一条二次贝塞尔曲线。

这条曲线由您在代码中指定的三个“控制点”组成：

control point 1 (p1) = (20,20)
control point 2 (p2) = (200,200)
control point 3 (p3) = (200,0)

要沿着曲线在值为u（范围为0到1，其中0是起始点，1是结束点）处插值，您可以使用所谓的伯恩斯坦多项式。 对于二次曲线（您的情况），这些多项式是：

B1 = (1 - u) * (1 - u)
B2 = 2 * u * (1 - u)
B3 = u * u

只需针对参数值u计算这些数字，然后将控制点乘以它们相应的伯恩斯坦多项式，并将结果相加。

point on curve at parameter *u* = p1 * B1 + p2 * b2 + p3 * B3

比如说，如果你想得到曲线上的5个点，你可以计算参数值为0、0.25、0.5、0.75和1.0时曲线上的点。

- kappamaki

---

我喜欢你在同一句话中轻松地使用“简单”和“多项式”这两个词！ - grapefrukt

现在为什么维基百科把事情搞得这么复杂呢？！谢谢你的提问，Kappamaki。 - chadiik

Answer 2

curveTo() 用于绘制二次贝塞尔曲线，其中贝塞尔曲线是在两个端点和两个锚点之间计算的，而二次贝塞尔曲线是两个锚点具有相同坐标的情况。

贝塞尔曲线通过几个方程式计算，允许您找到沿路径在给定时间达到的点的x和y坐标，因此这已经满足您的需求。 您可以在此页面上找到有关贝塞尔曲线的一般信息。

要获取坐标点，您所需要做的就是将这些方程式转换为ActionScript。 幸运的是，Paul Tondeur 在他的博客文章中展示了如何实现这一点。 他的解决方案用于绘制立方贝塞尔曲线，但您可以轻松更改代码以返回您想要的坐标。

- weltraumpirat

Answer 3

A Bezier curve is a parametric function. A quadratic Bezier curve (i.e. three control points) can be expressed as: F(t) = A(1 - t)^2 + B(1 - t)t + Ct^2 where A, B and C are points and t goes from zero to one.

This will give you two equations:

x = a(1 - t)^2 + b(1 - t)t + ct^2

y = d(1 - t)^2 + e(1 - t)t + ft^2

If you add for instance the line equation (y = kx + m) to that, you'll end up with three equations and three unknowns (x, y and t).

来自： 如何找到定义贝塞尔曲线的数学函数

使用这个方程式，你可以创建一个x和y坐标的数组。

- Daniel