前端使用 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源码

示例地址

相关推荐
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端
爱敲代码的小鱼9 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax