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.
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.