Math 获取旋转矩形的边界

我正在尝试获取

边界框中实际旋转矩形的
位置


矩形旋转了
120度

我正在努力实现你在这里看到的蓝色轮廓


我使用
矩阵
成功地实现了
旋转
，但我无法正确地实现其余部分

这是我的密码

let svg = document.querySelector('svg')
let overlay = document.querySelector('.overlay')
let rect = svg.children[0]

let bounds = rect.getBoundingClientRect()
let matrix = rect.getCTM()

overlay.style.top = bounds.top + 'px'
overlay.style.left = bounds.left + 'px'
overlay.style.width = bounds.width + 'px'
overlay.style.height = bounds.height + 'px'
overlay.style.transform = `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},0,0)`

已知数据：边框宽度
W
，高度
H
，旋转角度
Fi


需要：旋转矩形顶点的坐标

未知源矩形大小：
w x h

此尺寸和旋转角度的边界框大小：


所以我们可以解线性方程组，得到（注意
Pi/4
angle的奇异性）

顶点坐标：

 XatTopEdge = w * cs      (AE at the picture)
 YatRightEdge = h * cs    (DH)
 XatBottomEdge = h * as   (BG)
 YatLeftEdge = w * as     (AF)

请注意，对于给定的数据，我们不能在角度
Fi
和
90+Fi
之间存在差异，但这一事实可能不会影响解（
w
和
h
也会相互交换）
我认为您可以直接获得
rect
的维度，然后对其应用变换。在：

看看这些信息是否足以计算出你想要的？在我的例子中，我不知道矩形本身的高度，我只知道边界框的宽度/高度，所以我认为它在这种情况下不起作用，所以已知的数据是边界框的宽度/高度和旋转角度？没有了？是的，我知道边界框的高度、宽度、顶部、左侧位置以及最后的角度（120度）。没有什么else@MBo我的问题正好相反，如何获得未旋转矩形的边界我非常喜欢这个解决方案，它在简单形状上非常有效，但在某些情况下似乎不起作用，你可以看到这里的小提琴@zaarr78，这是因为边界框很紧，而字母本身在坐标~
11,31
处开始。您可以通过向转换添加额外的偏移量：
matrix（${matrix.a}，${matrix.b}，${matrix.c}，${matrix.d}，${matrix.e}，${matrix.f}）translate（${bbox.x}px，${bbox.y}px）
 h = (H * cs - W * as) / (cs^2 - as^2)
 w = -(H * as - W * cs) / (cs^2 - as^2)

 XatTopEdge = w * cs      (AE at the picture)
 YatRightEdge = h * cs    (DH)
 XatBottomEdge = h * as   (BG)
 YatLeftEdge = w * as     (AF)

let rect = svg.children[0]
let matrix = rect.getScreenCTM()

overlay.style.top = '0'
overlay.style.left = '0'
overlay.style.width = `${rect.width.animVal.value}px`
overlay.style.height = `${rect.height.animVal.value}px`
overlay.style.transformOrigin = '0 0'
overlay.style.transform = `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},${matrix.e},${matrix.f})`