如何获得非零旋转图像的宽度(konva)

How to get width of the image with non zero rotation (konva)

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

我正在使用 Konva v7.0

参见下图的 Konva 代码 tutorial re transformers here。由于形状 'stretched',宽度和高度值不会改变,但比例值会改变。

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

Transformer constructor. Transformer is a special type of group that allow you transform Konva primitives and shapes. Transforming tool is not changing width and height properties of nodes when you resize them. Instead it changes scaleX and scaleY properties.

而且我在 Konva 文档中看到各种提及维度方法不考虑缩放。

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

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

如果所讨论的形状是已转换组的一部分,那么您将需要使用

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

获取考虑其祖先尺度的节点的绝对尺度。