使用图层和blendMode制作的Paper.js橡皮擦工具

我正在使用Paper.js和Node.js制作简单的绘图应用程序。 有2层： – 图像的底层 – 绘图的顶层。 带图像的图层是绘图图层的背景。

我想做一个简单的橡皮擦工具，它将清除path上的绘图。 我正在尝试在blendMode设置为“destination-out”的顶层添加第二条path。

drawingLayer.activate(); path = new Path(); path.strokeColor = 'black'; path.strokeWidth = 5; if (mode == "erase") { path.strokeWidth = 15; path.blendMode = 'destination-out'; } 

我的问题是，这个“目的地输出”path不仅会删除顶层（绘图层）上的所有内容，还会删除底层（图像）上的所有内容。 当然，我希望图像保持不变的橡皮擦。 当我为我的页面设置一些CSS的背景时，它不会被橡皮擦path擦除。

你知道一个方法，使橡皮擦修改一个顶层，而不是底部层控制？

Answer 1

解决方法是在使用橡皮擦工具之前激活要擦除的图层，如下所示：

 var firstLayer = paper.project.activeLayer; //This one is used to erase var shapesLayer = new Layer(); // We don't want to erase on this one 

所以基本上，当我select橡皮擦工具

 firstLayer.activate(); 

然后，当我想要绘制形状，只需要以相同的方式激活“shapesLayer”。 这避免了新的path（用于擦除的path）触摸“shapesLayer”