tziuka
tziuka

Reputation: 545

Draw over a movieclip

I have a paint application. I want to put a layer(movieclip with a square) and I want to draw over it. Until now I cant paint but when I'm trying to add movieclip child, I cant draw over that movieclip. Which is the way to make something like this? This is my code:

import flash.display.Sprite;

var myThick=10;
var currentColor = 0X000000;
var myCanvas:Sprite;

init();

function init():void {
    drawCanvas();
    var clearSwatch:Sprite = new Sprite();
    clearSwatch.graphics.beginFill(0xFFFFFF);
    clearSwatch.graphics.lineStyle(2, 0x000000);
    clearSwatch.graphics.drawCircle(30, 370, 20);
    clearSwatch.graphics.endFill();
    addChild(clearSwatch);
    clearSwatch.buttonMode = true;
    clearSwatch.addEventListener(MouseEvent.CLICK, clearCanvas);//clear
    }

function drawCanvas():void {
    myCanvas = new Sprite();
    myCanvas.graphics.beginFill(0xF0F0F0);
    myCanvas.graphics.drawRect(60, 20, stage.stageWidth-80, stage.stageHeight+40);
    myCanvas.graphics.endFill();
    myCanvas.graphics.lineStyle(myThick, currentColor);
    addChild(myCanvas);
    myCanvas.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
  //stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
    myCanvas.buttonMode = true;
}

function startDraw(event:MouseEvent):void {
    myCanvas.graphics.moveTo(event.localX, event.localY);
    myCanvas.addEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}

function stopDraw(event:MouseEvent):void {
    myCanvas.removeEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}

function paintLine(event:MouseEvent):void {
    myCanvas.graphics.lineTo(event.localX, event.localY);
    event.updateAfterEvent();
}
function clearCanvas(event:MouseEvent):void {
    myCanvas.graphics.clear();
    drawCanvas();
}

How can I make it work? thank you!

Upvotes: 0

Views: 268

Answers (1)

Vesper
Vesper

Reputation: 18747

Add both listeners to stage, along with mouse move listener, but use graphics commands over myCanvas.

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
function startDraw(event:MouseEvent):void {
    myCanvas.graphics.moveTo(event.localX, event.localY);
    myCanvas.addEventListener(MouseEvent.MOUSE_MOVE, paintLine);
}

Etc.

Upvotes: 1

Related Questions