javascript - 使用图层和混合模式制作的 Paper.js 橡皮擦工具

Question

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

我想制作一个简单的橡皮擦工具来删除路径上的绘图。我正在尝试在我的顶层添加第二条路径，其中 blendMode 设置为“destination-out”。

drawingLayer.activate();
path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5;

if (mode == "erase") {
  path.strokeWidth = 15;
  path.blendMode = 'destination-out';
}

我的问题是这个“目标输出”路径不仅会删除顶层(绘图层)上的所有内容，还会删除底层(图像)上的所有内容。当然，我希望图像不被橡皮擦触及。当我在 css 中为我的页面设置一些背景时，它不会被橡皮擦路径删除。

你知道一种让橡皮擦修改一个顶层而不修改底层的方法吗？

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

所以基本上，当我选择橡皮擦工具时

firstLayer.activate();

然后，当我想绘制形状时，只需以同样的方式激活“shapesLayer”即可。这避免了工具(用于删除的工具)接触“shapesLayer”中的任何内容