在 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

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

Change width and size instead of scaleX and scaleY in Konvajs

canvas

konvajs