从Konvajs中的空白区域拖动变压器的最佳方法是什么

Question

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

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

我想在Transformer中添加一个透明的Rect(这个Rect的大小总是与Transformer相同(，然后在Transformer内添加我想要的任何其他形状。由于Rect和Transformer具有相同的大小；空区域"；我的其他形状不在那里。

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

Answer 1

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

如果将其设置为true，则整个变换器区域将可用于拖动。

但是，如果在其他形状之上有一个transformer，则形状将不会侦听常规事件(如click、touchstart等(。因为变换器矩形将过度绘制附加形状的命中区域。甚至会尽快开始工作，因为你从他们身上移除了这样一个变压器。

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>