2

我正在使用 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 中为我的页面设置一些背景时，它不会被橡皮擦路径擦除。

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

4

2 回答 2

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”中的任何内容

于 2014-07-29T14:28:17.757 回答
0

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

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'
});
于 2021-11-02T11:25:42.540 回答