您现在的位置是:首页 > Javascript
当前栏目
图形编辑器:场景坐标、视口坐标以及它们之间的转换
2023-02-19 12:22:04 时间
大家好,我是前端西瓜哥。
图形编辑器的坐标系有两种。
一个是场景(scene)坐标系,一个是 视口(viewport)坐标系。视口就是场景的一个子区域。
假设我们的视口的原点,离场景原点的坐标水平和垂直距离分别为 scrollX 和 scrollY。
先 不考虑缩放,假设我们在视口坐标上的某个地方点击了一下,这个坐标是 (x, y)
。这个坐标在场景坐标系中,就是:
挺简单。
视口坐标转换为场景坐标
下面我们引入画布缩放,即画布可以缩小和放大,对应的一个比例值 zoom。
视口中的某个坐标 (x, y) 在场景坐标系,则是 :
之所以要用 x 除以 zoom,是因为此时视口中展示的是缩放后的图形,里面的坐标都是缩放后的值。所以需要先转换为 zoom 值为 1 对应的真实值。
场景坐标转换为视口坐标
然后我们反过来,如何从场景坐标 (x, y) 转换为视口坐标?将前面的公式做等式变换即可:
我们通常是使用按键加滚轮的方式让画布以光标为中心进行缩放,或按按钮进行缩放,
为了让缩放后的场景还能对上缩放前光标的位置,我们需要计算缩放后的 scrollX 和 scrollY,进行校准。
核心思路是 保持缩放前点到视口左上角距离(视口坐标系)相同。
再说点别的。
可能会有这么一种情况,就是实际的视口区域的原点坐标有一些偏移,偏移了 offsetX 和 offsetY,见下图。
我们只需要将前面代码中的 scrollX 变成 (scrollX + offsetX),scrollY 变成 (scrollY + offsetY),其他不变。
就这些了。
总结一下,视口坐标是场景坐标平移并缩放后的结果,所以视口转场景,需要除以 zoom 再加上偏移值。在图形编辑器中,会有相当多的坐标系转换逻辑,这两个坐标系的关系需要好好消化理解。
相关文章
- 【转】前端开发与后台开发如何协作?
- WebStorm前端开发工具 - 工具软件
- @JsonMixin注解
- unocss
- 前端面试题汇总-Vue篇
- Lua-cjson安装及部署
- 树莓派海文SeaFile配置Nginx前端反代并启用HTTPS全攻略
- JS手撕(二) 数组扁平化、浅拷贝、深拷贝
- JS手撕(三) 节流、防抖
- JS手撕(五) new、Object.create()、Object.assign()
- JS手撕(六) trim、模板字符串、千分位分隔符
- JS手撕(七) 事件总线
- js-手撕8
- JS手撕(九) 常用Promise API
- JS手撕(十) 冒泡排序、插入排序
- JS手撕(十一) 选择排序、快速排序
- HTML基础
- 校招前端经典react面试题(附答案)
- 2023前端二面react面试题(边面边更)
- 校招前端二面高频vue面试题1