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/，关键是：

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

所以...

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();
})

唯一的区别是绘图基于从0到1的随机，因为在我的示例中，擦除从这里获取这些值erase = Math.floor(Math.random()*2);

Answer 2

我通过维护一个中间点数组并使用globalCompositeOperation作为destination-out和source-over来实现这一目标，以制作透明的橡皮擦跟踪。

以下是您需要使用鼠标移动功能的代码

`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();
    }


  };`

如何在EaselJS中创建橡皮擦？

2 个答案: