Actionscript 3 bitmapdata.draw with a brush using matrix

Question

I'm writing a paint program that uses shape brushes to draw by using the matrix function. Everything works well aside from the fact that it's not smooth at all. There will be gaps in the painting if the mouse is moved at a high speed.

I've looked everywhere but haven't been able to find any solution.

The code basically looks like this:

    //Press mouse within container. Uses Matrix to draw instances of the brush.
    private function handleMouseDown_drawContainer(e:MouseEvent):void
    {   
            _matrix.identity();
            _matrix.translate(mouseX - 10, mouseY - 30);
            _layout.bitmapData.draw(_layout.brush, _matrix);

            _layout.drawContainer.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove_drawContainer);
            _layout.drawContainer.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp_drawContainer)

    }

    //Move mouse within container. Uses Matrix to draw instances of the brush.
    private function handleMouseMove_drawContainer(e:MouseEvent):void
    {
            _matrix.identity();
            _matrix.translate(mouseX - 10, mouseY - 30);
            _layout.bitmapData.draw(_layout.brush, _matrix);
    }

If anyone could help me figure out how to smooth out the drawing, I'd be forever grateful! =p

Thanks in advance.

score 0 · Answer 1 · answered Nov 17 '12 at 13:49

You probably need some kind of interpolation between the mouse positions... there are of course many ways, I'll describe one very easy to implement but a bit hard to fine tune. Basically instead of drawing in each mouse position, you use an easing equation that follows the mouse with some delay... this way the described line will be a bit smoother, and will draw a few times between each mouse position.
So instead of doing (pseudocode):

onMouseMove {
  draw(mouseX, mouseY);
}

You do something like:

x = 0;
y = 0;
onEnterFrame {
  x += (mouseX - x) * 0.2;
  y += (mouseY - y) * 0.2;
  draw(x, y);
}

Although maybe what you really need is a way to limit the maximum distance between points, so if the mouse moves more in one frame, you interpolate points between the two positions and draw as many times as it's needed.
Or if you're looking for smoother lines (avoid sharp corners) maybe you also need to use beziers to control the resulting line.
Anyway, it all depends on the kind of drawing you're looking for.

Actionscript 3 bitmapdata.draw with a brush using matrix

1 Answers1