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

Posted 2023-03-25

【中文标题】如何在 KonvaJS 中的图层上绘制倒置元素

【英文标题】：How to draw an inverted element on a layer in KonvaJS

【发布时间】：2019-06-01 14:20:20

【问题描述】：

有什么方法可以在 KonvaJS 中添加一个超出其边界的形状？基本上是图层中的一个“洞”，这样我就可以通过使圆圈周围的所有内容变暗（黑色低不透明度）来突出画布中的一个点。

非常感谢任何帮助！

干杯

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

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

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

然后这将反过来“不画”一个圆圈，但它周围的所有东西都会采用给定的属性。在这种情况下，除了圆圈之外，它都会变暗一点。

【问题讨论】：

你有你想要的视觉演示吗？

也许this answer 是相关的 - 为了剪辑，您需要添加一个带有剪辑区域的组。

基本上this

【参考方案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

【讨论】：

这似乎正是我所需要的。我不太明白圆圈的切割是如何在这里工作的。您正在从一个角落到另一个角落绘制一个矩形，然后您只绘制一个圆圈。但是形状怎么知道圆的里面不属于这个形状呢？是处理这个问题的 fillStrokeShape 方法吗？

这与填充的“非零缠绕”有关吗？见wikipedia explanation here。

有没有办法删除不同的形状而不是arc？