计算画布内旋转元素的边界坐标|百事通

svg,dom类的图形编辑器，在画布内编辑元素完成后，为了得到只包含元素的部分，去掉画布的留白，或者进行编组时，往往需要计算元素在画布内的边界坐标，重新生成输出元素的坐标

(资料图)

1、对于无旋转等几何变化的基本元素，计算元素的边界坐标是很容易的（以屏幕坐标为准）

如下图，只需遍历每个元素的四个顶点坐标比较即可；

假设已知元素css属性 left = x,top = y ,width = w ,height = h;

对于任意元素四个顶点坐标分别为,（左上，右上，左下，右下）

\[pointLT\ =\ (x,\ y),pointRT\ =\ (x\ +\ w,\ y)\]\[pointLB\ =\ (x,\ y + h),pointRB\ =\ (x+w, y + h)\]

代码为

let minX = Infinity, minY = Infinity, maxX = -Infinity , maxY = -Infinity;elements.forEach(ele=>{    const points = [pointLT,pointRT, pointLB, pointRB ];    points.forEach(point=>{     minX = Math.min(minX, xx);     maxX = Math.max(maxX, xx);     minY = Math.min(minY, yy);     maxY = Math.max(maxY, yy);    })})

实际开发中，编辑器往往会对元素会有旋转反转裁剪等几何变化，如下图为实验仪器的组合，其边界可能为最左侧的旋转的玻璃棒和右侧旋转的试管决定

为了需重 新计算单个仪器旋转后的坐标和边界，从而 那么变化后的坐标如何计算呢

2、带有旋转属性的元素坐标计算

以元素中心E点为中心建立坐标系

A"B"C"D"为ABCD旋转θ ,后的矩形，已A点为例，连接EA,EA",根据向量的旋转角度公式有

\[\overrightarrow{EA"}\ =\ (A_{x}*\cos\theta\ -\ A_{y}*\sin\theta,\ A_{x}*\sin\theta\ +\ A_{y}*\cos\theta)\]

以上坐标是基于中心点坐标的，so可以用中心点的坐标E表示A"坐标,从而换算会屏幕坐标，(注意屏幕坐标的基是（0,1）（-1,0），故y需取负值）

\[A_{x}（屏幕坐标） = E_{x}（屏幕坐标） + A_{x}（对象坐标）\]\[A\_{y}（屏幕坐标） = - E\_{x}（屏幕坐标） + A\_{y}（对象坐标）\]

更新上一段代码为：

let minX = Infinity, minY = Infinity, maxX = -Infinity , maxY = -Infinity;elements.forEach(ele=>{    const vertices = [pointLT,pointRT, pointLB, pointRB ];    // ...    vertices.forEach((x,y)=>{     let xm = cx + (x - cx) * cos - (cy - y) * sin;     let ym = cy - ((x - cx) * sin + (cy - y) * cos);     minX = Math.min(minX, xm);     maxX = Math.max(maxX, xm);     minY = Math.min(minY, ym);     maxY = Math.max(maxY, ym);    })})