KonvaJS：使用Transformer变换后如何获取形状更新后的实际宽高

Konva 中形状的 width、height 存储的是原始基准尺寸，不会随 scaleX/scaleY、旋转、斜切等变换自动更新，可根据你的实际场景选以下两种方案计算实际渲染尺寸： #

场景1：形状无旋转、斜切变换 #

直接用原始尺寸乘以缩放绝对值即可得到实际宽高：

// shape 为目标 Konva 形状实例
const realWidth = Math.abs(shape.width() * shape.scaleX());
const realHeight = Math.abs(shape.height() * shape.scaleY());

场景2：形状存在旋转、斜切等复杂变换 #

此时单纯乘缩放会导致尺寸计算偏差，直接调用 Konva 内置的 getClientRect() 方法即可，该方法会自动计算所有变换生效后的实际包围盒尺寸：

// 默认返回相对于顶层画布的包围盒参数，包含描边、阴影尺寸
const rect = shape.getClientRect();
const realWidth = rect.width;
const realHeight = rect.height;

// 可选参数配置，按需添加：
// 1. 获取相对于父容器的包围盒：{relative: true}
// 2. 排除描边尺寸：{skipStroke: true}
// 3. 排除阴影尺寸：{skipShadow: true}
// 示例：
// const rect = shape.getClientRect({relative: true, skipStroke: true});

内容的提问来源于stack exchange，提问作者Dijkstra Algorithm