如何为白板应用程序实现平滑的绘制曲线？
我正在 ActionScript 3 中构建一个简单的白板应用程序。ActionScript 中的大多数白板或绘画应用程序倾向于使用间隔、计时器、mouseMove 事件或 EnterFrame 事件来跟踪鼠标位置并在跟踪点之间绘制线条或画笔。
我想要实现的是像 Photoshop 这样的程序在使用画笔工具绘画时可以渲染出漂亮平滑的绘画线条。在 Photoshop 中，无论您在画布上移动鼠标的速度有多快，绘制的线条总是会形成漂亮的平滑弯曲边缘。在我的应用程序中，使用前面提到的任何方法，将画笔渲染到舞台的函数调用之间总是存在延迟。因此，当以圆形方式快速移动鼠标时，使用任何这些技术都可能导致尖锐的角线。
这对我来说并不奇怪，我只是不知道如何才能像 Photoshop 的画笔工具那样获得更平滑的线条。请注意，我的应用程序的画笔主要基于形状，不或不能使用绘图 API 来绘制连续线。换句话说，graphics.curveTo() 不是一个选项。我还将画笔生成的精灵或形状渲染到 BitmapData 实例。
I'm building a simple white board app in ActionScript 3. Most white board or painting apps in ActionScript tend to use an interval, timer, mouseMove event, or enterFrame event to track the mouse position and paint lines or brushes in between the tracked points.
What I'm trying to achieve is the nice smooth painted line that a program like Photoshop can render while painting with the brush tool. In Photoshop, no matter how fast you move the mouse around the canvas, the painted lines always end up with a nice smooth curved edge. In my app, using any of the methods mentioned prior, there is always latency between the function calls that render the brush to the stage. Thus, using any of those techniques can result in a sharp cornered line when moving the mouse very quickly in a circular manner.
This is no surprise to me, I just have no idea how I could achieve a smoother line like Photoshop's brush tool. Mind you, the brushes for my app are mostly based on shapes and do not or cannot use the drawing API to draw continues lines. In other words, graphics.curveTo() is not an option. I am also rendering the Sprites or Shapes generated by the brushes to a BitmapData instance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
那么，如果不使用图形 API，如何绘制线条呢？ （您可能需要查看 Graphics API 的 lineBitmapStyle 函数）。
不过，无论使用哪种绘制方法，我都会估计画笔在两点之间的路径，也许使用前面的点来确定弯曲路径的方式（以及多少）。您读过贝塞尔曲线吗？ (http://en.wikipedia.org/wiki/B%C3%A9zier_curve)
So how are you drawing your lines if you're not using the graphics API? (you may want to look at the Graphics API's lineBitmapStyle function).
What I'd do, though, regardless of the drawing method, is estimate the path of the brush between the two points you have, perhaps using the previous points to determine which way (and how much) to curve the path. Have you read up on bezier curves? (http://en.wikipedia.org/wiki/B%C3%A9zier_curve)
我的解决方案最终是两种技术的结合。我最终所做的是在使用/绘制画笔时显示路径的预览。当这种情况发生时，我正在收集间隔之间的所有点。然后，当用户释放鼠标按钮时，我使用所有收集的点之间的二次贝塞尔曲线绘制更准确的弯曲画笔描边。
My solution ended up being a combination of two techniques. What I ended up doing was showing a preview of the path as the brush is being used/painted. As this is happening I'm collecting all the points between the intervals. Then, when the user releases the mouse button, I paint a more accurate, curved brush stroke using a quadratic bezier curve between all the collected points.
我认为获得更好结果的唯一方法是为 Flash 电影使用更高的帧速率。这样每秒会有更多的检查，这应该会使线路更加顺畅。
I think the only way to get a better result, is to use a higher framerate for your flash-movie. This way there are more checks per second, which should make the line more smooth.
http://www .paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/
看看这个:)它有一些样本
http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/
Look at this :) it has some samples