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

Question

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

我正在使用 Konva v7.0

Answer 1

请参阅此处的 Konva 代码教程重新转换器，如下图。宽度和高度值不会随着形状“拉伸”而改变，但比例值会改变。

Konva 文档中对转换器类的介绍说：

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

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

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

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

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

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

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