从旋转的元素中找到元素的实际高度和宽度

Question

我有如下公式来获取旋转后的矩形高度和宽度

radians = (Math.PI / 180) * degree;
x = Math.abs(Math.sin(radians)) * h + Math.abs(Math.cos(radians)) * w;
y = w * Math.abs(Math.sin(radians))  +  h * Math.abs(Math.cos(radians));

所以 x,y 值是旋转后的新高度和宽度。

例子矩形旋转了15度，高74宽110是旋转后的值，我想从这些变换后的值中找出矩形的原点高度（50）和宽度（100），我需要通过上面的公式找出这个，所以我可以用不同的值代替。 Sample Image of rotated rectangle

Answer 1

让我们表示

s = Math.abs(Math.sin(radians))

与 c=cosine 类似。那么你有方程组

x = s * h + c * w
y = c * h + s * w

第一个乘以c，第二个乘以s

c * x = c * s * h + c * c * w
s * y = s * c * h + s * s * w

并减去方程得到 w

w * (c * c - s * s) = c * x - s * y
w = (c * x - s * y) / (c * c - s * s)

对 h 做类似的程序（或在第一个等式中用 w 代替表示 h）

注意45/135/225/315度产生退化情况：分母为零，不可能得到真实的结果——这是基本的限制，我们可以无限刻写成正方形的角度为 45 的矩形的数量（此处为 x=y）

w = ((c * rot_w) - (s * rot_h)) / (c * c - s * s);
h = ((c * rot_h) - (s * rot_w)) / (c * c - s * s);

从旋转的元素中找到元素的实际高度和宽度

Find the actual height and width of element from rotated element

javascript

math

trigonometry

css-transforms