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

时间:2009-06-19 02:47:45

标签: actionscript-3 flash-cs4 tracing bezier pixels

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

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

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

到目前为止,我想象一下这个过程:

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

鼠标移动,lineTo XY坐标。

鼠标向上

,endFill。

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

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

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

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

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

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

杰西

3 个答案:

答案 0 :(得分:1)

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

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

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

祝你好运

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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