3

我目前正在按照本指南在舞台中选择形状并将它们放入 Transformer 中。如果可能的话，我想拖动整个 Transformer 及其所有内容，而不触及里面的任何形状。

例如，我有两条相距很远的线。它们都是 Transformer 内的节点，只要我单击这两条线中的一条，就可以拖动它们。但是，如果我试图从 Transformer 内的任何空白区域拖动，则不会发生任何事情（或者变压器会重置，具体取决于代码）。

我正在考虑向 Transformer 添加一个透明的 Rect（这个 Rect 将始终具有与 Transformer 相同的大小），然后在 Transformer 中添加我想要的任何其他形状。由于 Rect 和 Transformer 的大小相同，我可以轻松地将整个 Transformer 从我的其他形状不位于的任何“空白区域”中拖动出来。

我不确定这是否是正确/有效的方法。我应该如何解决这个问题以获得最佳结果？

4

1 回答 1

2

有一个实验性质shouldOverdrawWholeArea。Konva.Transformer它还没有在文档中。

如果将其设置为true整个变压器区域将可供拖动。

但是，如果您在其他形状之上有一个转换器，那么形状将不会监听常规事件（例如click，touchstart等）。因为变压器矩形会透支附加形状的命中区域。当您从它们中移除这样的变压器时，Even 将立即开始工作。

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

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

const shape1 = new Konva.Circle({
  x: 70,
  y: 70,
  radius: 50,
  fill: 'green'
});
layer.add(shape1);

const shape2 = shape1.clone({
   x: 190,
   y: 90
})
layer.add(shape2);

const tr = new Konva.Transformer({
  nodes: [shape1, shape2],
  shouldOverdrawWholeArea: true
});

layer.add(tr);

layer.draw();
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
<div id="container"></div>

于 2020-07-17T14:21:50.823 回答