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

如何解决如何获得非零旋转的图像宽度konva

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

我正在使用Konva v7.0

解决方法

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

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

变压器构造函数。变形金刚是一种特殊的群体 允许您转换Konva图元和形状。转换工具是 调整大小时不更改节点的宽度和高度属性 他们。而是更改了scaleX和scaleY属性。

而且我在Konva文档中看到了各种各样的提及，其中标注方法没有考虑缩放。

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

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

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

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

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