Question

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

我想制作一个简单的橡皮擦工具，它将擦除路径上的绘图。我尝试在顶层添加第二条路径，将blendMode设置为＆＃34; destination-out＆＃34;。

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

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

我的问题是这个＆＃34;目的地＆＃34; path不仅会删除顶层（绘图层）上的所有内容，还会删除底层（图像）上的所有内容。当然，我希望图像不受橡皮擦的影响。当我在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();

然后，当我想绘制形状时，只需激活“shapeLayer”＆＃39;一样的方法。这样可以避免新的路径（用于擦除的路径）触及“shapeLayer＆＃39;

中的任何内容”

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

1 个答案: