javascript Konva.JS如何从一个层减去另一个层?

x3naxklr  于 5个月前  发布在  Java
关注(0)|答案(1)|浏览(89)

我需要“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();
  });
}

字符串

eit6fx6z

eit6fx6z1#

我建议不要创建太多的层,而是创建一个层,然后使用Konva.Group来组织场景。
https://konvajs.org/docs/sandbox/Free_Drawing.html中所述,您可以使用globalCompositeOperation属性从一个组中减去另一个组。
globalCompositeOperation: 'destination-out'

相关问题