Converting Pixels to Bezier Curves in Actionscript 3
好的,所以我会尽量描述性描述。
我正在为一个客户机开发一个项目,这个客户机需要上传图像的jibjab风格的屏蔽功能。
我希望能够生成一个数据库可存储对象,其中包含贝塞尔形状的定位点/控制点位置,这样我可以稍后将其拉出并重新屏蔽该对象。这一切都很容易做到,除了一个要点:我需要从用户绘制的轮廓创建贝塞尔对象。
到目前为止,我的设想是这样的:
当鼠标按下时,创建一个新的精灵,开始填充,并移动到鼠标位置。
鼠标移动时,将直线移动到xy坐标。
鼠标向上时,结束填充。
这一切都很有效。我可以把信息存储在这里,但我会看到一个巨大的物体,里面有大量无用的x/y坐标,除了在每个像素上放置手柄,没有办法真正进行微调。(我也可以给最终用户一个铅笔工具…)
以下是我对贝塞尔曲线计算的看法:
1:计算出什么时候需要开始一条新的曲线,并在这个间隔上跟踪像素的xy。我想象这只是一个像素计数,也许每移动一个鼠标就增加一个计数变量,每x个像素就生成一个新的。这里的问题是有些曲线会不准确,而其他曲线则不必要,但我确实需要一个一般的区域,而不是一个精确的表示,这样它就可以工作了。不过,如果有更聪明的东西,我会更开心。
2:取每个新的x/y,将其存储为一个锚点,并找出控件将在这个锚点和最后一个锚点之间绘制直线曲线的位置。这就是我挂断电话的地方。我相信有人在flash中完成了这项工作,但是没有多少google可以帮助我完成这项工作。我已经做了很多素描,也做了一些我能把我的大脑包裹起来的小数学,但似乎无法找到一种将像素转换成贝塞尔曲线的方法。
这有可能吗?我真正需要的是接近相同形状的东西。我在想,也许只有当下一个像素的角度超过180度时,相对于当前线条或其他东西,锚定,并抓住这些变化之间的弧的边缘,但无论我多么努力,我似乎不知道如何使这个工作!
感谢您的帮助,我一定会在这里公布我的进展,我认为这在许多应用程序中可能真的很有用,只要它是实际可行的…
杰西
在我对这个问题的回答中,我讨论了使用自动跟踪将位图转换为贝塞尔曲线。我建议在服务器上通过此程序传递用户绘图。Autotrace在跟踪和简化方面做得非常出色,因此无需尝试在这里重新发明轮子。
把像素转换成贝塞尔曲线听起来很费劲。你可以尝试使用线性最小二乘算法。http://en.wikipedia.org/wiki/linear_最小二乘法
一个不同的战术,你能让你的用户画矢量图吗?这样,您就可以将形状存储在数据库中。
将光栅转换为矢量的另一个很酷的方法类似于这个迭代程序:http://rogerasing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/
祝你好运
谢谢你的回答,虽然我想我应该更具体的应用程序,我真的只需要一个面具的轮廓,所以将图像转换为向量或多边形,尽管这有多酷,但并不能真正解决我的问题。线性最小二乘算法是超级酷,我想这可能更接近我正在寻找的。
我现在有一个基本的解决方法,我只是计算鼠标移动的次数,然后每移动一个x(用它来获得最理想的曲线),我就抓住xy的位置。然后,我取其他存储的xy,并将其转换为锚点,其余的xy将转换为控件。这会产生一些令人满意的结果,但也有一些小问题,即遮罩的绘制速度会影响控制柄的数量,而实际上只是得到一个大致的区域,而不是精确的拟合。有趣的是,用户在绘制更精确的形状时似乎要慢一些,所以这个解决方案的效果比我想象的要好得多,但并没有想象的那么好。这对客户来说是可行的,所以尽管没有进一步的理由,但我喜欢学习新东西,并且会花一些非时钟的时间研究线性最小方程组,看看我是否能上一门课来为我做这些计算。如果有人遇到这种类型的东西的AS3代码,或者想要我的一些,让我知道,这是一个有趣的谜题。