在 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,输出