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

【问题标题】：Paper.js eraser tool made using layers and blendMode使用图层和混合模式制作的 Paper.js 橡皮擦工具
【发布时间】：2014-08-23 12:53:41
【问题描述】：

我正在使用 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';
}

我的问题是，这个“destination-out”路径不仅会删除顶层（绘图层）上的所有内容，还会删除底层（图像）上的所有内容。当然，我希望图像不受橡皮擦的影响。当我在 css 中为我的页面设置一些背景时，它不会被橡皮擦路径擦除。

你知道用橡皮擦修改顶层而不修改底层的方法吗？

【问题讨论】：

您最终是如何实现此功能的？我发现即使在顶层使用destination-out，也会在底层留下一个白色标记。

标签： javascript node.js canvas paperjs drawing2d

【解决方案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”中的任何内容

【讨论】：

如果我理解正确，您的图像（或您提到的形状，与 OP 要求的不同）然后驻留在顶层 - 它们不会遮挡底层的路径吗？

【解决方案2】：

为此，您必须将绘图项和橡皮擦项封装到具有混合模式source-over 的组中。这样，背景项目就不会受到橡皮擦项目destination-out混合模式的影响。这是一个简单的sketch 演示。

const backgroundCircle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

const foregroundCircle = new Path.Circle({
    center: view.center + 20,
    radius: 50,
    fillColor: 'blue'
});

const eraserCircle = new Path.Circle({
    center: view.center + [10, 0],
    radius: 50,
    fillColor: 'black',
    blendMode: 'destination-out'
});

const foreground = new Group({
    children: [foregroundCircle, eraserCircle],
    blendMode:'source-over'
});

【讨论】：