更改宽度和大小，而不是Konvajs中的scaleX和scaleY

Question

我正在使用Konvajs为一个简单的矩形实现转换功能，但是它将更改形状的scaleX和scaleY，而不是元素的实际宽度和高度。

更改形状的实际宽度和高度的正确方法是什么？

Answer 1

您可以使用transform或transformend事件将比例尺应用于宽度和高度，并将比例尺重置为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