前端使用 Konva 实现可视化设计器(16)- 旋转对齐、触摸板操作的优化
这一章解决两个缺陷,一是调整一些快捷键,使得 Mac 触摸板可以正常操作;二是修复一个 Issue,使得即使素材节点即使被旋转之后,也能正常触发磁贴对齐效果,有个小坑需要注意。
请大家动动小手,给我一个免费的 Star 吧~
大家如果发现了 Bug,欢迎来提 Issue 哟~
快捷键、触摸板的优化
- 兼容 MacOS Command 键
- Ctrl(Win)/Command(Mac) + R 刷新
- 退格键也作为删除键
- 缩放以触摸板双指缩放为准(即鼠标改为上滚轮放大、下滚轮缩小)
请移步查看代码差异,比较简单。
旋转对齐的支持
把磁贴 attract 移动至新增的 AttractTool 中,并新增 AttractDraw 方便调试
先看看 Issue 反馈的问题:
以水平方向上为例,没有旋转之前,逻辑上的对齐线大概如此:
只是,旋转之后,按原来计算坐标+宽高的方式就不合适了:
这里,符合直觉的,应该如下:
正好,官方有个合适的 API 可以获得上面黄线的矩形区域信息,就是 getClientRect。
如果仅考虑单个素材节点,直接获取该节点的 getClientRect 信息,替换掉此前的计算逻辑即可。
可是,这里考虑的还有多选的情况,这个时候就应该通过 transformer 获取了,这里有一个坑,如下:
通过 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()
最新在线示例,提供了测试调试用例,可以查看连接线的变化:
这样,按新的区域信息计算就满足了:
More Stars please!勾勾手指~
前端使用 Konva 实现可视化设计器(16)- 旋转对齐、触摸板操作的优化的更多相关文章
- 惊闻企业Web应用生成平台 活字格 V4.0 免费了,不单可视化设计器免费,服务器也免费!
官网消息: 针对活字格开发者,新版本完全免费!您可下载活字格 Web 应用生成平台 V4.0 Updated 1,方便的创建各类 Web 应用系统,任意部署,永不过期. 我之前学习过活字格,也曾经向用 ...
- (原创)【B4A】一步一步入门02:可视化界面设计器、控件的使用
一.前言 上篇 (原创)[B4A]一步一步入门01:简介.开发环境搭建.HelloWorld 中我们创建了默认的项目,现在我们来看一下B4A项目的构成,以及如何所见即所得的设计界面,并添加和使用自带的 ...
- WinForms项目升级.Net Core 3.0之后,没有WinForm设计器?
目录 .NET Conf 2019 Window Forms 设计器 .NET Conf 2019 2019 9.23-9.25召开了 .NET Conf 2019 大会,大会宣布了 .Net Cor ...
- Windows Phone 十二、设计器同步
在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...
- 流程设计器jQuery + svg/vml(Demo6 - 增加结点属性及切换)
到目前流程设计器流程结点的拖拽操作已基本完成,接下来就到结点的属性开发了.前面已经开发过流程模板的属性了,结点属性跟模板属性类似,从属性模板定义copy一份,然后按各结点类型进行调整就ok. 1.先来 ...
- .NET创建宿主设计器--DesignHost、DesignSurface.
一个窗口在运行时,是这样的: 但是,在设计时,却远比这复杂的多,它需要一个设计器对象:它仅存在于设计时,并连接到运行时存在的对象. 宿主容器 我们可以看到每个窗体和按钮均有与之相关的设计器.这两个 ...
- ActiveReports 9 新功能:可视化查询设计器(VQD)介绍
在最新发布的ActiveReports 9报表控件中添加了多项新功能,以帮助你在更短的时间里创建外观绚丽.功能强大的报表系统,本文将重点介绍可视化数据查询设计器,无需手动编写任何SQL语句,主要内容如 ...
- VS2015 android 设计器不能可视化问题解决。
近期安装了VS2015,体验了一下android 的开发,按模板创建执行了个,试下效果非常不错.也能够可视化设计.但昨天再次打开或创建一个android程序后,设计界面直接不能显示,显示错误:(可能是 ...
- 可视化流程设计——流程设计器演示(基于Silverlight)
上一篇文章<通用流程设计>对鄙人写的通用流程做了一定的介绍,并奉上了相关源码.但一个好的流程设计必少不了流程设计器的支持,本文将针对<通用流程设计>中的流程的设计器做一个简单的 ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
随机推荐
- Roslyn 分析器 EnforceExtendedAnalyzerRules 属性的作用
在开始编写 dotnet 的 Roslyn 分析器项目时,会被 VisualStudio 通过 RS1036 要求在项目文件配置上 EnforceExtendedAnalyzerRules 属性,本文 ...
- 以 standalone 模式启动 Aapche Pulsar
以 standalone 模式启动 Aapche Pulsar standalone 模式常用于开发测试阶段,请勿在生产环境使用. 目录 以 standalone 模式启动 Aapche Pulsar ...
- Java设计模式-策略模式-基于Spring实现
1.策略模式 1.1.概述 策略模式是一种行为设计模式,它允许在运行时选择算法的行为.它将算法封装在独立的策略类中,使得它们可以相互替换,而不影响客户端代码.这种模式通过将算法的选择从客户端代码中分离 ...
- Spring学习一(依赖注入/Bean/注解等)
1.Spring依赖注入的方式. 2.依赖注入的类型 3.Bean的作用域 4.自动注入 5.使用注解的方式 6.在spring配置文件中引入属性文件 1.Spring依赖注入的方式 平常的java开 ...
- 使用.NET源生成器(SG)实现一个自动注入的生成器
DI依赖注入对我们后端程序员来说肯定是基础中的基础了,我们经常会使用下面的代码注入相关的service services.AddScoped<Biwen.AutoClassGen.TestCon ...
- 16、数据库加固-mysql 加固
1.修改 DBA 登录密码 shell 下执行: mysqladmin -u root password 非首次修改:mysqladmin -u root password -p原密码 在 mysql ...
- 01. go-admin的下载与启动
目录 一.介绍 二.新建空文件夹 三.获取后台源码并启动 1.下载编译go代码 2.配置命令到goland IDE ,debug启动 四.获取前端ui源码并启动 1.下载编译go代码 2.启动项目 * ...
- vue2下拉框组件使用技巧
1.ant design 下拉框组件--单选 <span style="font-size: 14px;">污水厂</span> <a-select ...
- C语言:输出大写的三角形字母表(进阶)
//该程序只支持输入大写字母,输入G,就输出A~G的三角形字母表 /* 从A到Z的输出数量应该是1 3 5 7 9..... */ 利用这个特性,对空格和字母进行输出 A字母在 ...
- 使用 Spacesniffer 找回 48G 系统存储空间的总结
前言 Spacesniffer 是一个免费的文件扫描工具,通过使用树状图可视化布局,可以立即了解大文件夹的位置,帮助用户处理找到这些文件夹 当前系统C盘空间 清理后系统C盘空间 下载 Spacesni ...