问题描述
我在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;
获得考虑其祖先比例的节点的绝对比例。