Change width and size instead of scaleX and scaleY in Konvajs

Question

I am implementing the transforming feature for a simple rectangle using Konvajs, but it changes the scaleX and scaleY of the shape and not the actual width and height of the element.

What would be the right approach to change the actual width and height of the shape?

Answer 1

You can use transform or transformend events to apply the scale to width and height and reset the scale to 1.

const tr = new Konva.Transformer({
  node: shape,
  ignoreStroke: true
});
layer.add(tr);


shape.on('transform', () => {
  // adjust size to scale
  // and set minimal size
  shape.width(Math.max(5, shape.width() * shape.scaleX()));
  shape.height(Math.max(5, shape.height() * shape.scaleY()));
  // reset scale to 1
  shape.scaleX(1);
  shape.scaleY(1);
});

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