获取旋转矩形的边界

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

获取旋转矩形的边界

Get bounds of rotated rectangle

math

geometry

svg

rotation

svg-transforms