如何获得非零旋转图像的宽度（konva）

Question

我在 Group 元素中有一个图像。使用 Transformer 元素，用户可以更改图像宽度和旋转。之后，如何获得图像宽度？ getWidth() 返回我在创建新图像时手动设置的值。 getClientRect().width 返回实际宽度，它向用户显示的方式，所以看起来没问题，但是当图像旋转时它的问题就开始了。因为getClientRect().width返回的不是图片宽度(y)，而是我们图片外接矩形的宽度(x)

我正在使用 Konva v7.0

Answer 1

请参阅 Konva 代码 tutorial re transformers here，下图。宽度和高度值不会随着形状“拉伸”而改变，但比例值会改变。

Konva 文档中的 intro to the transformer class 说：

变压器构造函数。 Transformer 是一种特殊类型的组 允许您转换 Konva 基元和形状。转换工具是 调整大小时不更改节点的宽度和高度属性 他们。相反，它会更改 scaleX 和 scaleY 属性。

我在 Konva 文档中看到各种提到维度方法不考虑缩放的内容。

总之，转换器通过缩放来改变它所影响的形状的尺寸。因此，可以通过以下方式找到形状的当前缩放宽度：

let visibleWidth = shape.width() * shape.scaleX();

如果有问题的形状是被转换的组的一部分，那么您将需要使用

let visibleWidth = shape.width() * shape.getAbsoluteScale().x;

获取考虑到其祖先比例的节点的绝对比例。