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

news/2024/10/2 1:29:30

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

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

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

github源码

gitee源码

示例地址

快捷键、触摸板的优化

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

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

旋转对齐的支持

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

先看看 Issue 反馈的问题:

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

image

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

image

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

image

正好,官方有个合适的 API 可以获得上面黄线的矩形区域信息,就是 getClientRect。
如果仅考虑单个素材节点,直接获取该节点的 getClientRect 信息,替换掉此前的计算逻辑即可。
可是,这里考虑的还有多选的情况,这个时候就应该通过 transformer 获取了,这里有一个坑,如下:

image

通过 transformer 的 getClientRect,以为获得左边的区域信息,可事实是左边那样。
这就导致了,计算的磁贴坐标都出现的偏移。
上结论,按 Konva 定结构特点, transformer 必定包含一个 name 为 back 的层,正正是上面左边需要的区域,获取该区域信息就正确了。

// /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()

需改为

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

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

image

image

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

image

More Stars please!勾勾手指~

源码

gitee源码

示例地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/44904.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

samba 访问日志 chdir_current_service: vfs_ChDir(/data/share) failed: 权限不够

ubuntu安装了samba服务器,windows可以发现共享目录,但是一打开目录报错,window提示,没有权限 查看samba的用户日志,显示权限不够,下面是配置信息也授予了/data/share为samba的用户及权限 最后发现是,因为data这个目录设置0754,修改为0777就可以了 也是上级目录也要samb…

嵌入式 Linux 基础:环境配置(Debian 12 安装配置)

目录一、安装虚拟机1、安装 VMware Workstation Pro注册博通官网注册账号下载 VMware Workstation Pro2、虚拟机安装 Debian12下载 Debian12 镜像虚拟机设置配置(安装) debian12配置 debian12 环境3、配置 Debian12 软件设置 Flatpak 和 Flathub安装微信二、其他开发环境配置…

spring的问题-能耗、学习曲线

说实话,在过去将近20年中,spring对于it行业的帮助还是很大的,尤其是信息系统建设方面。 但在我看来,spring的发展也许进入了一个困局。开始的时候,spring的确是一个还是算小巧的工具,但是现在已经变成了一个庞杂的大东西。 的确,它好像什么都可以解决,但是变得过于繁复…

面经梳理-java多线程其他

梳理java多线程其他内容面经题目 Threadlocal使用场景?原理?如何保证内存不泄露? ThreadLocal使用场景 不加锁的情况下,多线程安全访问共享变量,每个线程保留共享变量的副本(线程特有对象),每个线程往这个ThreadLocal中读写是线程隔离。 ThreadLocal原理 Thread类有一个…

Linux安装JDK环境

1. 下载安装官网地址:https://www.oracle.com/java/technologies/downloads/?er=221886#java11本地包下载后 传入 路径 /usr/local/ 下。  不使用 xftp 也可以直接拖入。如果无法拖入需要安装上传下载文件包:# 安装上传下载文件包 yum install lrzsz -y解压包:# 将jdk-11.…

光子晶体板相关参数优化

筛选能带的方法 在重复23年science论文时,使用了ratio和ratio2,就是判断局域在板附近的程度 注意还要筛选Q因子:if(ewfd.Qfactor>1e6,1,0) ‍ 不用整个BZ都扫描,这样太慢了 就扫两个点 求带隙 ‍ 在派生值-计算中,可以计算一些表达式的表格!辅助筛选,精确知道一些点的…

SpringBoot3整合SpringDoc实现在线接口文档

写在前面 在现目前项目开发中,一般都是前后端分离项目。前端小姐姐负责开发前端,苦逼的我们负责后端开发 事实是一个人全干,在这过程中编写接口文档就显得尤为重要了。然而作为一个程序员,最怕的莫过于自己写文档和别人不写文档 大家都不想写文档,那这活就交给今天的主角S…

Asp.net core依赖注入服务生存期踩坑记录

Asp.net core依赖注入服务生存期踩坑记录 写在开头 今天我本想实现组件全局共享数据(状态管理),保存工厂名,用户登录id,设备编码等字段,以便全局共享。 但我在a组件设置的值到了b组件就不见了。 遇到的问题,与依赖注入服务生存期有关,我们知道依赖注入服务一共有三种:…