Search code examples
konvajstransformer-modelreact-konva

How to change the position of transformer rotation icon

I've started react-konva. And I am trying to use Transfomer.

For now rotate handler is top-center and I want to place it to bottom-center, left or other side. How can I do that?

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

Solution

  • At the current moment (konva@4.0.16) that is not possible to do directly with Konva API. But you can make a workaround by placing a shape inside the rotated group.

    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);

    But in this case, tracking the absolute position of a shape is more complex. Because Konva.Transformer will change attributes of the group, not the shape.

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