获取旋转矩形的边界 [英] Get bounds of rotated rectangle

问题描述

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

I'm trying to get the position of the actual rotated rectangle inside the bounding box.

矩形旋转120deg

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

I'm trying to achieve the blue outline you can see here

我设法使用matrix正确地获得了rotation的权利，但是我无法获得其余的权利.

I manage to get the rotation right using the matrix but I can't get the rest right.

这是我的代码

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/

推荐答案

已知数据:包围盒宽度W，高度H，旋转角度Fi
想要:旋转的矩形顶点的坐标.

Known data: bounding box width W, height H, rotation angle Fi
Wanted: coordinates of rotated rectangle vertices.

未知源矩形大小:w x h

此尺寸和旋转角度的边框尺寸:

Bounding box size for this dimension and rotation angle:

 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角的奇异性)

so we can solve linear equation system and get (note singularity for Pi/4 angle)

 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也会相互交换)

Note that with given data we cannot differ between angles Fi and 90+Fi but this fact perhaps does not influence on solution (w and h will exchange each other too)

这篇关于获取旋转矩形的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！