前端使用 Konva 实现可视化设计器(16)- 旋转对齐、触摸板操作的优化

这一章解决两个缺陷,一是调整一些快捷键,使得 Mac 触摸板可以正常操作;二是修复一个 Issue,使得即使素材节点即使被旋转之后,也能正常触发磁贴对齐效果,有个小坑需要注意。

请大家动动小手,给我一个免费的 Star 吧~

大家如果发现了 Bug,欢迎来提 Issue 哟~

github源码

gitee源码

示例地址

快捷键、触摸板的优化

  • 兼容 MacOS Command 键
  • Ctrl(Win)/Command(Mac) + R 刷新
  • 退格键也作为删除键
  • 缩放以触摸板双指缩放为准(即鼠标改为上滚轮放大、下滚轮缩小)

请移步查看代码差异,比较简单。

旋转对齐的支持

把磁贴 attract 移动至新增的 AttractTool 中,并新增 AttractDraw 方便调试

先看看 Issue 反馈的问题:

以水平方向上为例,没有旋转之前,逻辑上的对齐线大概如此:

只是,旋转之后,按原来计算坐标+宽高的方式就不合适了:

这里,符合直觉的,应该如下:

正好,官方有个合适的 API 可以获得上面黄线的矩形区域信息,就是 getClientRect。

如果仅考虑单个素材节点,直接获取该节点的 getClientRect 信息,替换掉此前的计算逻辑即可。

可是,这里考虑的还有多选的情况,这个时候就应该通过 transformer 获取了,这里有一个坑,如下:

通过 transformer 的 getClientRect,以为获得左边的区域信息,可事实是左边那样。

这就导致了,计算的磁贴坐标都出现的偏移。

上结论,按 Konva 定结构特点, transformer 必定包含一个 name 为 back 的层,正正是上面左边需要的区域,获取该区域信息就正确了。

ts 复制代码
// /src/Render/handlers/SelectionHandlers.ts

// 原来通过以下的 x、y、width、height 信息计算:
const pos = this.render.transformer.position()
const width = this.render.transformer.width()
const height = this.render.transformer.height()

需改为

ts 复制代码
// /src/Render/handlers/SelectionHandlers.ts

// 现在改为通过以下 rect 信息的 x、y、width、height 信息计算:
const rect = this.render.transformer.findOne('.back')!.getClientRect()

最新在线示例,提供了测试调试用例,可以查看连接线的变化:

这样,按新的区域信息计算就满足了:

More Stars please!勾勾手指~

源码

gitee源码

示例地址

相关推荐
学不会•30 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架