How can I achieve a smooth painted curve for a white board app?

Question

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.

Answer 1

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)

Answer 2

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.

Answer 3

http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/

Look at this :) it has some samples

Answer 4

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.