如何将curveTo（）转换为Points列表？

Question

使用以下AS3，它将使用curveTo()绘制曲线：

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... */
];

结果将用于创建遵循以下路径的射弹雨的事物，例如：

Answer 1

通过阅读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表示结束点），可以使用所谓的Bernstein多项式。对于二次曲线（您的情况），多项式为：

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

只需计算参数值 u 的这些数字，并将控制点加上相应的Bernstein多项式相加。

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

因此，例如，如果您希望沿曲线获得5个点，则可以在参数值0,0.25,0.5,0.75和1.0

处计算沿曲线的点数。

Answer 2

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

贝塞尔曲线是通过许多方程计算的，这些方程允许您找到沿路径在给定时间到达的点的x和y坐标，因此这已经很好地满足了您的需求。您可以在this page上找到有关贝塞尔曲线的一般信息。

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

Answer 3

  

贝塞尔曲线是参数函数。二次贝塞尔曲线   （即三个控制点）可表示为：F（t）= A（1-t）^ 2 +   B（1-t）t + Ct ^ 2其中A，B和C是点，t从0到0   之一。

     

这将给你两个方程式：

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

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

     

如果你将线方程（y = kx + m）加到那里，你最终会得到三个方程和三个未知数（x，y和t）。

自： How to find the mathematical function defining a bezier curve

使用此公式，您可以创建x和y坐标数组