Question

I’m creating a simple drawing prototype to be used on Android where the user can drag his finger across the screen and draw basic lines/shapes etc. I’m having some performance issues when drawing over the same areas and after a while performance drops considerably.

I am wondering if there is any way to, after the line has been drawn (after a touch begin, touch move, and touch end event chain), to store the newly drawn line into a bitmap containing the rest of the drawings.

I’ve had a look at bitmap.merge() but this would create problems when it came to mixing colors. I simply want any new ‘drawings’ to be saved on top of everything drawn previously.

// To hold current 'drawing'
var clip:Shape = new Shape();   

// To hold past 'drawings'
var drawing:Bitmap = new Bitmap();

public function Main()
{
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; 

    addChild(drawing);
    addChild (clip);

    addEventListener(TouchEvent.TOUCH_BEGIN, tBegin);
    addEventListener(TouchEvent.TOUCH_MOVE, tMove);
    addEventListener(TouchEvent.TOUCH_END, tEnd);
}

private function tBegin(e:TouchEvent):void 
{
    clip.graphics.lineStyle(28,0x000000);
    clip.graphics.moveTo(mouseX, mouseY);  
}

private function tMove(e:TouchEvent):void 
{
    clip.graphics.lineTo(mouseX, mouseY);
}

private function tEnd(e:TouchEvent):void 
{
    // Save new graphics and merge with drawing
}

Answer 1

Just keep drawing in your clip shape, and on tEnd draw clip inside a bitmapData assigned to a bitmap

// To hold current 'drawing'
var bmpData:BitmapData = new BitmapData (800, 800) // put here your desired size

var clip:Shape = new Shape();   

// To hold past 'drawings'
var drawing:Bitmap = new Bitmap(bmpData);

public function Main()
{
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; 

    addChild(drawing);
    addChild (clip);



    addEventListener(TouchEvent.TOUCH_BEGIN, tBegin);
    addEventListener(TouchEvent.TOUCH_MOVE, tMove);
    addEventListener(TouchEvent.TOUCH_END, tEnd);
}

private function tBegin(e:TouchEvent):void 
{
    clip.graphics.lineStyle(28,0x000000);
    clip.graphics.moveTo(mouseX, mouseY);  
}

private function tMove(e:TouchEvent):void 
{
    clip.graphics.lineTo(mouseX, mouseY);
}

private function tEnd(e:TouchEvent):void 
{
    // Save new graphics and merge with drawing
    bmpData.draw (clip);
    clip.graphics.clear();
}