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