在Actionscript 3中将像素转换为贝塞尔曲线

Question

好的，所以我会尝试尽可能具有描述性。

我正在为一个客户开发一个项目，该项目需要上传图片的jibjab风格的屏蔽功能。

我希望能够生成一个数据库可存储对象，其中包含贝塞尔曲线形状的锚点/控制位置，因此我可以稍后将其拉出并重新屏蔽该对象。这一切都很容易做到，除了一个问题：我需要从用户绘制的轮廓创建贝塞尔对象。

到目前为止，我想象一下这个过程：

在鼠标按下时，创建一个新的精灵，beginFill和moveTo鼠标位置。

鼠标移动，lineTo XY坐标。

鼠标向上

，endFill。

这一切都很有效。我可以在这里存储信息，但我会看到一个充满了大量相当无用的x / y坐标的GIGANTIC对象，并且无法在每个像素上放置句柄之外进行微调。 （我也可以给最终用户一个铅笔工具......）

就贝塞尔曲线计算而言，这就是我的想法：

1：弄清楚何时需要开始一条新曲线，并在此间隔内跟踪像素的xy。我想象这只是一个像素数，可能只是每个鼠标移动增加一个计数变量，并每x像素一个新的。这里的问题是一些曲线是不准确的，而其他曲线是不必要的，但我真的只需要一个通用区域，而不是一个精确的表示，所以它可以工作。不过，我会对一些更聪明的事情感到高兴。

2：获取每个新的x / y，将其存储为锚点，并找出控件将在此位置与最后一个锚点之间形成直线曲线的位置。这是我真正挂断的地方。我敢肯定有人在flash中做过这个，但谷歌搜索的数量似乎无法帮助我完成这项工作。我已经做了很多素描，我可以用很少的数学方法包裹我的大脑，但似乎无法找到将像素转换为贝塞尔的方法。

这可能吗？我真正需要的是接近相同形状的东西。我想也许只有当下一个像素的角度相对于当前线或者某个东西超过180度时放置锚点，并且只是在这些变化之间抓住弧线的边缘，但无论我怎么努力，我似乎无法弄清楚如何使这个工作！

感谢您的帮助，我一定会在这里发布我的进展，我认为这在许多应用程序中非常有用，只要它实际上是可行的......

杰西

Answer 1

感谢您的回答，虽然我想我可能应该对应用程序更加具体，但我真的只需要一个掩码的轮廓，所以将图像转换为矢量或多边形，尽管它有多酷，但是真的解决了我的问题。线性最小二乘算法非常酷，我认为这可能更接近我正在寻找的东西。

我现在有一个基本的解决方法，我只是计算鼠标移动，然后每个X（玩它以获得最理想的曲线）移动，我抓住xy位置。然后，我把所有其他存储的xy，并把它变成一个锚，剩下的xys变成控件。这产生了一些令人满意的结果，但是有一些小问题，因为绘制蒙版的速度会影响手柄的数量，而且它实际上只是获得一般区域，而不是精确配合。 有趣的是，用户似乎为更精确的形状画得更慢，所以这个解决方案比我想象的要好很多，但它并不像它想象的那么好。这对客户来说很有用，所以虽然没有理由进一步追求它，但我喜欢学习新东西，并会花一些时间来研究线性最小方程，看看我是否可以鼓励一个可以进行这些计算的课程。为了我。如果有人为这类事情运行某些AS3代码，或者想要我的某些东西，请告诉我，这是一个有趣的难题。

Answer 2

将像素转换为贝塞尔曲线听起来很麻烦。您可以尝试使用线性最小二乘算法之类的东西。 http://en.wikipedia.org/wiki/Linear_least_squares

另一种机智，你可以让你的用户绘制矢量图形吗？这样你就可以将形状存储在数据库中。

另一种将栅格转换为矢量的很酷的方法就像这个迭代程序： http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/

祝你好运

Answer 3

在我对这个问题的回答中，我讨论了使用 autotrace 将位图转换为贝塞尔曲线。我建议在服务器上传递用户绘图通过此程序。 Autotrace在跟踪和简化方面做得非常出色，因此无需在此尝试重新发明轮子。