math - 获取旋转矩形的边界
问题描述
我试图position
在bounding box
.
矩形旋转了120deg
我正在尝试实现您可以在此处看到的蓝色轮廓
我设法得到rotation
正确的使用,matrix
但我不能得到其余的权利。
这是我的代码
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
此尺寸和旋转角度的边界框尺寸:
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
也会相互交换)
推荐阅读
- python - 关于数据框中的空白行
- javascript - Three.js GLTF 导出中的破损纹理
- ios - SwiftUI 可以将 ObservableObject 放在另一个 ObservableObject 中吗?
- mongodb - 在嵌套字段上添加哈希索引会在 Mongodb 中产生 0 个匹配项
- linux - 在 bash sh 脚本中打开 shell
- reactjs - 从 react-select 设置 Select 元素的样式
- javascript - Vue.js 中的电子邮件验证
- php - 功能测试中的夹具对象引用不正确
- c++ - 无法接收无效电子邮件
- c++ - 按人员编号快速排序一组人员