konvajs - 如何改变变压器旋转图标的位置

Question

我已经开始 react-konva 了。我正在尝试使用Transfomer。

现在旋转处理程序位于顶部中心，我想将其放置在底部中心、左侧或另一侧。我怎样才能做到这一点？

https://konvajs.org/docs/select_and_transform/Transformer_Styling.html

Answer 1

目前 ( konva@4.0.16) 无法直接使用KonvaAPI。但是您可以通过在旋转组内放置一个形状来解决问题。

const group = new Konva.Group({
  x: stage.width() / 2,
  y: stage.height() / 2,
  rotation: 90
});
layer.add(group);

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

const tr = new Konva.Transformer({
  node: group
})
layer.add(tr);

但在这种情况下，跟踪形状的绝对位置更加复杂。因为Konva.Transformer会改变组的属性，而不是形状。

https://jsbin.com/peqinuzuqi/1/edit?html,js,输出