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

看看下面的AS3，将绘制一条曲线使用curveTo()：如何将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);

产生的视觉是：

enter image description here

现在我想要的东西能够沿着这条道路;我怎样才能将这个视觉转换成坐标列表？我与任何高等数学都有过争执，但我假设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... */ 
];

结果将被用于的东西，如创建遵循以下路径弹丸的雨，例如：

enter image description here

来源

2012-01-19 Marty

你也应该看看这个家伙博客：http://www.paultondeur.com/ 2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3 /，即时使用它。 – turbosqel

通过阅读ActionScript文档，我明白curveTo动作脚本中的方法生成二次贝塞尔曲线。

曲线组成的，你在你的代码中规定的三个“控制点”：

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

要在值内插沿曲线中的值ü范围从0到1（0是开始点和1是结束点），你可以使用所谓的伯恩斯坦多项式。对于二次曲线（你的情况）的多项式是：

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

简单地计算这些数字的参数值ü并添加控制点乘以其相应的伯恩斯坦多项式在一起。

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

因此，例如，如果你想获得沿曲线5点，你在参数值0，0.25mmol，0.5，0.75计算沿曲线的点，和1.0

来源

2012-01-20 00:28:21 kappamaki

我喜欢你在同一个句子中随便使用“简单”和“多项式”！ – grapefrukt

现在为什么他们在维基百科上如此复杂？谢谢Kappamaki。 – chadiik

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

贝塞尔曲线是通过许多方程来计算的，这些方程可以让您找到沿着路径给定时间到达的点的x和y坐标，因此这已经非常适合您的需求。您可以在this page上找到关于贝塞尔曲线的一般信息。

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

来源

2012-01-20 00:31:37 weltraumpirat

贝塞尔曲线是一个参数函数。二次贝塞尔曲线（即，三个控制点）可以表示为：其中A，B和C是点，其中，A，B和C是点t从零到一。

这会给你两个等式：
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坐标

来源

2012-01-20 00:48:59 Daniel

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

回答

相关问题