konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.72k stars 934 forks source link

How to use Transformer with scale setter? #1837

Closed xie-zhichao closed 1 month ago

xie-zhichao commented 1 month ago

Hi, i want to use Transformer with scale setter, just like the code as follow:

var tr1 = new Konva.Transformer({
  nodes: [text1, rect1, text2],
  centeredScaling: true,
  resizeEnabled: false,
  rotateEnabled: false,
  borderEnabled: false,
});
layer.add(tr1);
// set scale by setter
tr1.scale({ x: 1.1, y: 1.1 });

this code has no effect in 9.3.15.

In addition, i also tried Group, just like the code as follow:

var group = new Konva.Group({
});
group.add(text1);
group.add(rect1);
group.add(text2);
layer.add(group);
// set scale by setter
group.scale({ x: 1.1, y: 1.1 });

Scale has effect, but the position is not correct

lavrton commented 1 month ago

The Transformer is ignoring any transforms from parent containers and itself. So it keeps its size in constant form. If you want to change its size, use https://konvajs.org/docs/select_and_transform/Transformer_Styling.html#title-Style-Konva-Transformer