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

Question

我目前正在舞台上跟随 this guide 到 select 个形状，并将它们放入变形金刚中。如果可能的话，我想拖动整个 Transformer 及其所有内容，而不触及里面的任何形状。

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

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

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

Answer 1

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

如果您将其设置为 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>

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

What is the best way to drag a transformer by dragging from empty areas in Konvajs?

konvajs

konva

konvajs-reactjs