Javascript 如何为编辑页制作画布橡皮擦?

Javascript 如何为编辑页制作画布橡皮擦?,javascript,canvas,easeljs,eraser,Javascript,Canvas,Easeljs,Eraser,我已经做了一个编辑表单,但这个编辑表单还包括画布上的一个图形。除了我为画布做的橡皮擦外,一切正常。如果您在空白画布上绘制图形,则橡皮擦可以完美工作,但因为这是用于编辑页面,这意味着它已经有了一个图形。我现在的主要问题是,每当我使用橡皮擦时,先前的画作都会从画布上移除,只留下你所做的新标记。有人能帮我做这个吗 var stage, wrapper, erase=0; function init(){ var stage = new createjs.Stage("canvas"

我已经做了一个编辑表单,但这个编辑表单还包括画布上的一个图形。除了我为画布做的橡皮擦外,一切正常。如果您在空白画布上绘制图形,则橡皮擦可以完美工作,但因为这是用于编辑页面,这意味着它已经有了一个图形。我现在的主要问题是,每当我使用橡皮擦时,先前的画作都会从画布上移除,只留下你所做的新标记。有人能帮我做这个吗

var stage, wrapper, erase=0;

  function init(){

      var stage = new createjs.Stage("canvas");
      createjs.Ticker.addEventListener("tick", stage);
      createjs.Touch.enable(stage);    

      stage.addChild(new createjs.Text("", "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();

      // retrieves image url for previous drawing
      var path = document.getElementById("hidden").value;
      var prevDraw = new createjs.Bitmap(path);
      prevDraw.image.onload = function(){
          prevDraw.x = 0;
          prevDraw.y = 0;
          wrapper.addChild(prevDraw);
          wrapper.updateCache();
          stage.update();
      }


      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;

          if(document.getElementById('toggle').checked){
              erase = 1;
          }else{
              erase = 0;
          }

          wrapper.addEventListener("pressmove", function(event){
              // Draw a round line from the last position to the current one.
              drawing.graphics.ss(5, "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 clear(){
      stage.removeAllChildren();
      stage.update();
      init2();

    }

    document.getElementById("clear").onclick = function(){
      clear()
    };

    function reset(){
      stage.removeAllChildren();
      stage.update();
      init();

    }

    document.getElementById("reset").onclick = function(){
      reset()
    };

  }

如果你想保留旧东西,只需在清理画布后重新绘制它们。如何存储prevDraw并重新绘制?这就是我对点所做的,存储它并在以后重新绘制,但我在使用位图时有点迷路了。