如何获取旋转后Konva.js矩形的实际宽度？

嘿，这问题我之前也踩过坑！你说得完全对，getClientRect()返回的是旋转后矩形的轴对齐包围盒尺寸——也就是能把旋转后的矩形完全装进去的最小矩形的宽高，所以旋转角度一变，这个值肯定跟着变，根本不是矩形自身的实际宽度。

给你两个实用方案，看你需求选：

1. 直接获取矩形的固有宽高（最常用） #

Konva的形状对象本身就存着你设置的原始宽高，不管怎么旋转、平移，只要没刻意修改矩形的宽高属性，都能直接用下面的方法拿到真实尺寸：

// 获取矩形实际宽度
const actualWidth = rect1.width();
// 获取矩形实际高度
const actualHeight = rect1.height();

这个值就是你最初创建矩形时设置的width和height，或者之后用rect1.width(newVal)修改后的数值，完全不受旋转角度影响，完美对应矩形自身的实际大小。

2. 计算旋转后的轴向投影长度（特殊场景用） #

如果你要的是旋转后矩形在画布上占据的水平/垂直方向总跨度（其实getClientRect()已经能拿到这个），或者某个特定方向的长度，可以用三角函数计算：

// 把Konva的角度（度）转换成弧度
const rotationRad = Konva.getAngle(rect1.rotation());
const w = rect1.width();
const h = rect1.height();

// 计算旋转后水平方向的最大跨度（和getClientRect().width结果一致）
const horizontalSpan = Math.abs(w * Math.cos(rotationRad)) + Math.abs(h * Math.sin(rotationRad));
// 计算垂直方向的最大跨度
const verticalSpan = Math.abs(w * Math.sin(rotationRad)) + Math.abs(h * Math.cos(rotationRad));

不过一般来说，第一种方法就足够满足“获取旋转后矩形实际宽度”的需求啦。

比如在你的示例里，把rect1.getClientRect().height换成rect1.height()，就能得到正确的矩形实际高度，不管怎么旋转都不会变。

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