[플래시] 선그리기, 지우개 기능 구현

흰색 도화지 위에 색깔 별로 라인을 그려보고, 지우개로 지우는 기능을 해보겠습니다.

뭔가 좀 어설프라도 이해 좀 해주세요..사이즈도 좀 이상해졌네요 ㅎ

우선 스테이지에 인스턴스네임 board으로 흰색 무비클릭을 깔았습니다.. 그위에 그리기버튼, 지우개버튼, 각 색깔을 선택할 수 있게 버튼을 추가했습니다...그리고 펜역할을 할 동그라미를 하나 추가해놨습니다.

라인굵기는 숫자 20으로 넣어놨습니다...동적으로 라인 굵기를 바꿀 수 있게 한번 직접 해보시기 바랍니다.^^

ball이 펜역할을 하는 것입니다...Event.ENTER_FRAME 이벤트를 추가해서 항상 마우스를 따라 다니게 했습니다.

ball.addEventListener(Event.ENTER_FRAME , enterFrameHandler);

penMc, 와 eraseMc에 마우스클릭,마우스오버,마우스아웃 이벤트를 추가했습니다..

penMc.addEventListener(MouseEvent.CLICK, penMcClick);

eraserMc.addEventListener(MouseEvent.CLICK, eraserMcClick);

penMc.addEventListener(MouseEvent.MOUSE_OVER , overHandler);

eraserMc.addEventListener(MouseEvent.MOUSE_OVER , overHandler);

penMc.addEventListener(MouseEvent.MOUSE_OUT , outHandler);

eraserMc.addEventListener(MouseEvent.MOUSE_OUT , outHandler);

board(도화지)dp 선을 그릴때 쓰일 마우스 다운과 업을 추가했습니다... 다운은 한번 클릭후 마우스를 떼지않은 상태이고, 업은 마우스를 뗀 평상시 상태입니다.

board.addEventListener(MouseEvent.MOUSE_DOWN, startPencilTool);

board.addEventListener(MouseEvent.MOUSE_UP, stopPencilTool);

colorVec 벡터를 추가해 색상을 추가했습니다.

private var colorVec:Vector.<Number>=new Vector.<Number>;

colorVec.push(0x000000);

colorVec.push(0xff0000);

colorVec.push(0x0000ff);

colorVec.push(0x00ff00);

라인이 그려지는 시작점 위치 지정과 라인의 굴기와 색상을 지정한 것입니다.

pencilDraw.graphics.moveTo(e.target.mouseX, e.target.mouseY);

pencilDraw.graphics.lineStyle(20,color);

펜과 지우개에 동시에 쓰이며, 마우스를 따라 라인이 그려지고 지우개로 지워집니다.

pencilDraw.graphics.lineTo(mouseX, mouseY);

line.fla

 main.as