如何在KonvaJS中的图层上绘制倒置元素

Question

有没有办法在KonvaJS中添加一个在其边界之外绘制的形状？基本上是图层中的一个"孔"，这样我就可以通过使圆圈周围的所有内容变暗（黑色，低不透明度）来突出显示画布上的一个点。

任何帮助都非常感谢！

干杯

编辑：这是我的意思的图片（我还不允许嵌入它）：https://i.stack.imgur.com/2yve2.jpg

我希望可能有这样的事情：

Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  opacity: 0.3,
  fill: 'black',
  inverted: true
})

然后，这将反过来"不画"一个圆，但它周围的一切都会采用给定的属性。在这种情况下，除了圆圈之外，一切都会暗淡一点。

Answer 1

您可以使用

自定义形状执行此操作：

const shape = new Konva.Shape({
  width: stage.width(),
  height: stage.height(),
  // what is color of background ?
  fill: 'rgba(0,0,0,0.2)',
  sceneFunc: (ctx, shape) => {
    // draw background
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(shape.width(), 0);
    ctx.lineTo(shape.width(), shape.height());
    ctx.lineTo(0, shape.height());
    ctx.lineTo(0, 0);
    // now cut circle from the background
    // we can do this by useing arc
    const x = 200;
    const y = 200;
    const radius = 10;
    // but it must be counter-clockwise
    // so the last argument true is very important here
    ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
    ctx.fillStrokeShape(shape);
  },
  // remove shape from hit graph, so it is not visible for events
  listening: false
});

演示：https://jsbin.com/tevejujafi/3/edit?html,js,output