Javascript 使用橡皮擦时保留背景图像

我需要建立一个绘图板与擦除功能使用PaperJS。绘图板需要有背景图像，人们可以在画布上绘制或删除现有路径

//erase function 
function onMouseDown(event) {   
    path = new paper.Path();
    path.strokeColor = 'red';
    path.strokeWidth =  10;
    path.strokeCap = 'round';
    path.blendMode = 'destination-out';
}       

function onMouseDrag(event) {        
    path.add(event.point);                 
}

//setup background image 
var bgimage = "./cat.jpg"; 
var raster = new paper.Raster({
    source: bgimage, 
    position: paper.view.center
});  

使用这种方法的问题是背景图像也会被擦除

擦除结果：
JSFiddle：

---

有没有办法在不删除背景图像的情况下删除现有路径？

如果背景图像没有更改：您可以将其放在

下方的

中

---

如果您希望能够编辑图像：您可以重新绘制图像，然后每帧重新绘制图形（单独处理）。

我使用两个画布（一个用于基本绘图功能，另一个用于背景画布）解决了此问题。然后重叠两块画布

我扩展了您最初的代码示例，以便演示如何使用层作为解决方案。基本上，创建了三个层。它们是按照您在中看到它们的顺序创建的（1:背景，2:前景，3:clearBtn）。早期创建的层在视觉上“位于”后期创建的层之下

通过这种方式，您可以将静态光栅图形保留在最底层（背景），在中间层（前景）创建“橡皮擦”路径，并通过单击“清除”按钮删除/清除这些“橡皮擦”路径。“清除”按钮位于最顶层，因此不会被“橡皮擦路径”遮挡。我刚刚添加了clear按钮，以强调层提供的新增组织控制

JS-Bin
帆布{
边框：1px实心#000；
}
变量层={
“背景”：新图层（），
“前景”：新图层（），
“clearBtn”：新层（）
};
var路径=[]；
//擦除功能
函数onMouseDown（事件）{
layers.foreground.activate（）；
路径=新纸张。路径（）；
path.strokeColor='red'；
path.strokeWidth=10；
path.strokeCap='round'；
path.blendMode='destination out'；
路径。推送（路径）；
}       
函数onMouseDrag（事件）{
layers.foreground.activate（）；
添加（事件点）；
}
//设置背景图像
layers.background.activate（）；
变量bgimage=”http://placehold.it/300x150"; 
var raster=新纸张。raster({
资料来源：bgimage，
位置：paper.view.center
});  
//建立一个“清除按钮”
//单击此按钮将删除所有子项
//从前景层
layers.clearBtn.activate（）；
var clearBtn=新路径矩形({
点：新点（250,2），
尺寸：新尺寸（50,20），
样式：{
fillColor:'白色'，
strokeColor:“黑色”
}
});
var txt=新点文本({
点：clearBtn.position+新点（0,4），
内容：“清楚”，
理由：“中心”
});
var clearBtnGrp=新组({
儿童：[clearBtn，txt]
});
clearBtnGrp.on（'mousedown'，函数（）{
对于（var i=0；i

您到底想做什么？背景图像是否可以编辑？如果橡皮擦添加一些白色（这是您的代码所做的）、删除颜色（它将显示背景图像）或剪切/分割/删除现有路径（仅用于向量）？我已经将img放置在画布外。这是我的工作示例。如果您不告诉我更多关于您的问题，则不会。我已指定一个图像作为绘图板的背景。我希望背景图像不受橡皮擦的影响或被画布清除。橡皮擦是如何获取背景颜色或形成透明线条的？你是否考虑过使用图层？我应该补充一下，你需要激活你想画的每一层。