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并重新绘制?这就是我对点所做的,存储它并在以后重新绘制,但我在使用位图时有点迷路了。