Konva Shapes 的布尔运算

Question

我想知道如何在 Konva.js 上进行布尔运算？ 我想从 Konva.Rect 中减去 Konva.Line。

是否有任何内置函数，或者我需要一个外部库？

Answer 1

Konva 中没有内置的形状布尔运算函数。

但是您可以使用 group + caching + globalCompositeOperation 作为解决方法。

1. 画矩形
2. 使用 globalCompositeOperation = destination-out 绘制一条线以从 rect 中“剪切”它
3. 将矩形和线都放入组中
4. 缓存组，因此一行的 globalCompositeOperation 不会影响其余的绘图。

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const group = new Konva.Group({ draggable: true });
layer.add(group);

const shape = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'green'
});
group.add(shape);

const line = new Konva.Line({
  x: 50,
  y: 50,
  points: [20, 20, 50, 20, 50, 50],
  closed: true,
  fill: 'black',
  globalCompositeOperation: 'destination-out'
})
group.add(line);

group.cache();

  <script src="https://unpkg.com/konva@^9/konva.min.js"></script>
  <div id="container"></div>