Re: draw aplication

Anton Azarov wrote:

 

Try simply execute my code. It will works only if you don't change board x/y.

 

import flash.display.Sprite;
var pencilDraw:Shape = new Shape();
var activeColor:uint = 0x000000;
var board : Sprite = new Sprite();
addChild(board);
board.graphics.beginFill(0xccccc);
board.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
board.addEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);
board.addEventListener(MouseEvent.MOUSE_UP, stopPencilTool);
function startPencilTool(e:MouseEvent):void{          pencilDraw = new Shape();          board.addChild(pencilDraw);          pencilDraw.graphics.moveTo(mouseX, mouseY);          pencilDraw.graphics.lineStyle(50, activeColor);          board.addEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool);}
function drawPencilTool(e:MouseEvent):void{          pencilDraw.graphics.lineTo(mouseX, mouseY);}
function stopPencilTool(e:MouseEvent):void{          board.removeEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool);}

 

If you need to change - board coorinates update functions like this:

 

pencilDraw.graphics.moveTo(e.localX, e.localY);

 

and

 

 pencilDraw.graphics.lineTo(e.localX, e.localY);

 

Firstly you need understand how to work with Display List object When A placed on the table with 0/0 coordinates and B placed in A with 50/50 coordinates. Than move A to 100 by X and your B still have x:50/y:50 because it's placed in A. So coordinates of parents and parents don't included

 

When you use localX and localY this mean you get coordinates only in parent space. But when you use mouseX and mouseY - this mean you use global coordinates.

 

So when you move your board x:50 your localX/localY will be 0,0 as top left corner and you will draw in that place where you press.

But when you draw with mouseX/mouseY - you draw with global mouseX/mouseY and this mean if you press on x:25 - you will see big offset 25 + 50

 

Sorry If I explain not clear

 

P.S. this also can be simple "Scaling issue". If your Flash Player was scaled - you can see similar offset.

thanks for the answer, the explanation above is very helpful to me,

but I have a little problem when I add a Circle to the Stage and the circle to replace mouse events, so when the circle is pressed and moved it will draw the line, ...

you know what I mean

My code :

import flash.display.Sprite;
import flash.events.MouseEvent;
 
var pencilDraw:Shape = new Shape();
var activeColor:uint = 0x000000;
var board : Sprite = new Sprite();
addChild(board);
pencilDraw = new Shape();
board.addChild(pencilDraw);
var circle:Sprite = new Sprite();
addChild(circle);
board.graphics.beginFill(0xccccc);
board.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
circle.graphics.beginFill(0xfffff);
circle.graphics.drawCircle(20,20,10);
 
circleaddEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);
circle.addEventListener(MouseEvent.MOUSE_UP, stopPencilTool);
 
 
function startPencilTool(e:MouseEvent):void
 
{
          e.target.startDrag();
          pencilDraw.graphics.moveTo(e.localX, e.localY);
          pencilDraw.graphics.lineStyle(10, activeColor);
          board.addEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool);
}
function drawPencilTool(e:MouseEvent):void
{
          pencilDraw.graphics.lineTo(e.localX, e.localY);
}
function stopPencilTool(e:MouseEvent):void
{
     stopDrag();
     board.removeEventListener(MouseEvent.MOUSE_MOVE, drawPencilTool);
}

the above code is not working properly, please help me