最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

计算画布内旋转元素的边界坐标|今日视点

来源:博客园

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

关键词: