Konva.JS 如何从另一层中减去一层？

Question

我需要“drawingLayer”图层作为“normalLayer”图层的遮罩 我已经尝试了很多东西，但我无法从“normalLayer”层中减去“drawingLayer”。

也许我错误地完成了任务，但重点是我想要实现一个结果，以便我可以用鼠标左/右键擦除或显示“normalLayer”图层

为了清晰起见，这里是 codepen

function initializeKonva() {
  let container = document.querySelector('#MagicContainerCanvas');
  if (!container) {
    console.error('Container #MagicContainerCanvas not found');
    return;
  }

  let containerWidth = container.offsetWidth;
  let containerHeight = container.offsetHeight;

  let stage = new Konva.Stage({
    container: container,
    width: containerWidth,
    height: containerHeight
  });

  // Create a layer with a red filter
  let redFilterLayer = new Konva.Layer();
  stage.add(redFilterLayer);

  // Create a normal layer
  let normalLayer = new Konva.Layer();
  stage.add(normalLayer);

  // Loading Images into Layers
  loadImage(getLightSkin, redFilterLayer, true);
  loadImage(getLightMask, normalLayer, false);

  // Create a drawing layer
  let drawingLayer = new Konva.Layer();
  stage.add(drawingLayer);

  // Create a layer to display the brush
  let brushLayer = new Konva.Layer();
  stage.add(brushLayer);

  let isDrawing = false;
  let brushSize = 20;
  let currentLine;

  // Brush
  let brush = new Konva.Circle({
    x: -50,
    y: -50,
    radius: brushSize / 2,
    stroke: 'black',
    strokeWidth: 1,
    fill: 'rgba(0,0,0,0.2)'
  });
  brushLayer.add(brush);

  stage.on('mousedown', function(e) {
    isDrawing = true;
    let pos = stage.getPointerPosition();

    currentLine = new Konva.Line({
      stroke: 'black',
      strokeWidth: brushSize,
      globalCompositeOperation: e.evt.button === 2 ? 'destination-out' : 'source-over',
      points: [pos.x, pos.y],
      tension: 0.5,
      lineCap: 'round',
      lineJoin: 'round'
    });

    drawingLayer.add(currentLine);
  });

  stage.on('mousemove', function(e) {
    let pos = stage.getPointerPosition();
    brush.position({ x: pos.x, y: pos.y });
    brushLayer.batchDraw();

    if (isDrawing && currentLine) {
      let newPoints = currentLine.points().concat([pos.x, pos.y]);
      currentLine.points(newPoints);
      drawingLayer.batchDraw();
    }
  });

  stage.on('mouseup', function() {
    isDrawing = false;
  });

  stage.on('contextmenu', function(e) {
    e.evt.preventDefault();
  });
}

Answer 1

我建议不要创建太多层。相反，创建一层并使用

Konva.Group

来组织场景。

如 https://konvajs.org/docs/sandbox/Free_Drawing.html 中所述，您可以使用

globalCompositeOperation

属性从一组中减去另一组。

globalCompositeOperation: 'destination-out'