EaselJS에서 지우개를 만드는 방법은 무엇입니까?

Question

캔버스 페인트를 개발하고 있지만 지우개가 필요합니다. 그래서이 줄을 사용하여 내용을 지우지 만 클릭하면 전체 캔버스가 투명 해집니다.

 //undo tool 
     var undo = new createjs.Bitmap(app.loader.getResult('undo')); 
     undo.name = 'undo'; 
     undo.x = brush.x + 90; 
     undo.y = brush.y; 
     undo.addEventListener('click', this.undoHandler); 
     this.toolsContainer.addChild(undo); 

     //trash tool 
     var clear = new createjs.Bitmap(app.loader.getResult('clear')); 
     clear.name = 'clear'; 
     clear.x = undo.x + 90; 
     clear.y = undo.y; 
     clear.addEventListener('click', this.clearHandler); 
     this.toolsContainer.addChild(clear); 

     undoHandler:function(){ 

     if(tools.undoArray.length){ 
      var lastItem = tools.undoArray.pop(); 
      app.container.removeChild(lastItem);   

      var lastItem2 = tools.undoArray2.pop(); 
      app.container.removeChild(lastItem2); 

      var lastItem3 = tools.undoArray3.pop(); 
      app.container.removeChild(lastItem3); 

      app.stage.update(); 
     } 

    }, 

    clearHandler:function(){ 
     app.container.removeAllChildren(); 
     app.container.updateCache(clearhandler?"destination-out":"source-over");; 
     app.stage.update(); 
    }, 

나는이 삭제

http://jsfiddle.net/lannymcnie/ZNYPD/ 

어떤 생각 같은 것을 개발하려고?

Answer 1

잘 여기 http://jsfiddle.net/lannymcnie/ZNYPD/, 열쇠는 이것이다 : 유일한 차이점은 도면이 때문에 1 0에서 임의의 기반으로되어

var stage, wrapper,erase; 

function init() { 
    var stage = new createjs.Stage("canvas"); 
    createjs.Ticker.addEventListener("tick", stage); 

    // Add some text to draw on top of (also instructions) 
    stage.addChild(new createjs.Text("Click and Drag to Draw", "40px Arial", "#000000").set({x:200,y:200})); 

    // Set up the container. We use it to draw in, and also to get mouse events. 
    var wrapper = new createjs.Container(); 
    wrapper.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,800,600)); 
    wrapper.cache(0,0,800,600); // Cache it. 
    stage.addChild(wrapper); 

    // Create the shape to draw into 
    var drawing = new createjs.Shape(); 
    wrapper.addChild(drawing); 

    var lastPoint = new createjs.Point(); 

    wrapper.addEventListener("mousedown", function(event) { 

     // Store the position. We have to do this because we clear the graphics later. 
     lastPoint.x = event.stageX; 
     lastPoint.y = event.stageY; 

     erase = Math.floor(Math.random()*2); 

     wrapper.addEventListener("pressmove", function(event){ 
      // Draw a round line from the last position to the current one. 
      drawing.graphics.ss(20, "round").s("#ff0000"); 
      drawing.graphics.mt(lastPoint.x, lastPoint.y);   
      drawing.graphics.lt(event.stageX, event.stageY); 

      // Update the last position for next move. 
      lastPoint.x = event.stageX; 
      lastPoint.y = event.stageY; 

      // Draw onto the canvas, and then update the container cache. 

      wrapper.updateCache(erase==1?"destination-out":"source-over"); 
      drawing.graphics.clear(); 
     }); 

     // Listen for mousemove 
    }); 
} 
$(function(){ 
    init(); 
}) 

wrapper.updateCache(erase?"destination-out":"source-over"); 

그래서 ... 내 예를 들어 여기에서이 값을 지우면 erase = Math.floor(Math.random()*2);

Answer 2

중간 점의 배열을 유지하고 globalCompositeOperation 투명한 지우개 흔적을 만들기 위해 목적지 아웃과 소스 오버.

다음

당신이 모든 'mousedown'에 청취자를 추가 마우스 이동 기능

`var handleMouseMove = function (event) { 
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1); 

    if(curTool.type=="eraser"){ 

      var tempcanvas = document.getElementById('drawcanvas'); 
    var tempctx=tempcanvas.getContext("2d"); 
    tempctx.beginPath(); 
    tempctx.globalCompositeOperation = "destination-out"; 
    tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);  
    tempctx.fill(); 
    tempctx.closePath(); 
    tempctx.globalCompositeOperation = "source-over"; 
    drawingCanvas.graphics.clear(); 

    // keep updating the array for points 
    arrMidPtx.push(midPt.x); 
    arrMidPty.push(midPt.y); 
    stage.addChild(drawingCanvas); 
    stage.update(); 

    } 

    else if (curTool.type=="pen"){ 

     drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); 

     arrMidPtx.push(midPt.x); 
     arrMidPty.push(midPt.y); 
     arrOldPtx.push(oldPt.x); 
     arrOldPty.push(oldPt.y); 
     arrOldMidPtx.push(oldMidPt.x); 
     arrOldMidPty.push(oldMidPt.y); 

     oldPt.x = stage.mouseX; 
     oldPt.y = stage.mouseY; 
     oldMidPt.x = midPt.x; 
     oldMidPt.y = midPt.y; 

     stage.addChild(drawingCanvas); 
     stage.update(); 
    } 


    };`