获取旋转矩形的边界

Question

我正在尝试获取bounding box 内实际旋转矩形的position。

矩形旋转120deg

我正在尝试实现您可以在此处看到的蓝色轮廓

我设法使用matrix 正确获得rotation，但我无法正确获得其余部分。

这是我的代码

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)`

http://jsfiddle.net/wjugqn31/67/

Answer 1

已知数据：边界框宽度W，高度H，旋转角度Fi
需要：旋转矩形顶点的坐标。

未知源矩形大小：w x h

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

 H = w * Abs(Sin(Fi)) + h * Abs(Cos(Fi))
 W = w * Abs(Cos(Fi)) + h * Abs(Sin(Fi))
 denote 
 as = Abs(Sin(Fi))
 cs = Abs(Cos(Fi))

所以我们可以求解线性方程组并得到（注意Pi/4角度的奇异性）

 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)

请注意，对于给定的数据，我们无法区分角度 Fi 和 90+Fi，但这一事实可能不会影响解决方案（w 和 h 也会相互交换）

Answer 2

我认为您可以直接获取rect 的尺寸，然后对其应用转换。在summary:

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})`