前端使用 Konva 实现可视化设计器(4)
给上一章做一个补充,就是实现通过上下左右按键移动所选节点。
继续求 Star ,希望大家多多一键三连,十分感谢大家的支持~
创作不易,Star 50 个,创作加速!
通过按键移动节点
准备工作
给 SelectionTool 添加两个必要的方法:
// 更新已选位置
selectingNodesAreaMove(offset: Konva.Vector2d) {
this.selectingNodesArea?.x(this.selectingNodesArea.x() + offset.x)
this.selectingNodesArea?.y(this.selectingNodesArea.y() + offset.y)
}
// 更新节点位置
selectingNodesMove(offset: Konva.Vector2d) {
for (const node of this.render.selectionTool.selectingNodes) {
node.x(node.x() + offset.x)
node.y(node.y() + offset.y)
}
}
根据上一章的设计,选中一个/多个节点的时候,还会伴随一个 group 作为辅助,所以我们除了移动所选节点的同时,还需要移动 selectingNodesArea。
按键控制,就是需要处理 dom 的 keydown 和 keyup 两个事件,放在 KeyMoveHandlers 文件中,这里是核心代码:
keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
if (!e.ctrlKey) {
if (
Object.values(Types.MoveKey)
.map((o) => o.toString())
.includes(e.code)
) {
if (e.code === Types.MoveKey.上) {
this.render.selectionTool.selectingNodesAreaMove({ x: 0, y: -this.speed })
this.render.selectionTool.selectingNodesMove({ x: 0, y: -this.speed })
} else if (e.code === Types.MoveKey.左) {
this.render.selectionTool.selectingNodesAreaMove({ x: -this.speed, y: 0 })
this.render.selectionTool.selectingNodesMove({ x: -this.speed, y: 0 })
} else if (e.code === Types.MoveKey.右) {
this.render.selectionTool.selectingNodesAreaMove({ x: this.speed, y: 0 })
this.render.selectionTool.selectingNodesMove({ x: this.speed, y: 0 })
} else if (e.code === Types.MoveKey.下) {
this.render.selectionTool.selectingNodesAreaMove({ x: 0, y: this.speed })
this.render.selectionTool.selectingNodesMove({ x: 0, y: this.speed })
}
if (this.speed < this.speedMax) {
this.speed++
}
}
}
},
keyup: () => {
this.speed = 1
}
这里设计的规则是,按一下移动 1 像素,按着不动则会按 1 像素增速移动,松开按键则恢复原来速度。
接下来,计划实现下面这些功能:
- 放大缩小所选的“磁贴效果”(基于网格)
- 拖动所选的“磁贴效果”(基于网格)
- 节点层次单个、批量调整
- 键盘复制、粘贴
- 等等。。。
是不是更加有趣呢?是不是值得更多的 Star 呢?勾勾手指~
前端使用 Konva 实现可视化设计器(4)的更多相关文章
- 惊闻企业Web应用生成平台 活字格 V4.0 免费了,不单可视化设计器免费,服务器也免费!
官网消息: 针对活字格开发者,新版本完全免费!您可下载活字格 Web 应用生成平台 V4.0 Updated 1,方便的创建各类 Web 应用系统,任意部署,永不过期. 我之前学习过活字格,也曾经向用 ...
- (原创)【B4A】一步一步入门02:可视化界面设计器、控件的使用
一.前言 上篇 (原创)[B4A]一步一步入门01:简介.开发环境搭建.HelloWorld 中我们创建了默认的项目,现在我们来看一下B4A项目的构成,以及如何所见即所得的设计界面,并添加和使用自带的 ...
- Windows Phone 十二、设计器同步
在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...
- WinForms项目升级.Net Core 3.0之后,没有WinForm设计器?
目录 .NET Conf 2019 Window Forms 设计器 .NET Conf 2019 2019 9.23-9.25召开了 .NET Conf 2019 大会,大会宣布了 .Net Cor ...
- ActiveReports 9 新功能:可视化查询设计器(VQD)介绍
在最新发布的ActiveReports 9报表控件中添加了多项新功能,以帮助你在更短的时间里创建外观绚丽.功能强大的报表系统,本文将重点介绍可视化数据查询设计器,无需手动编写任何SQL语句,主要内容如 ...
- VS2015 android 设计器不能可视化问题解决。
近期安装了VS2015,体验了一下android 的开发,按模板创建执行了个,试下效果非常不错.也能够可视化设计.但昨天再次打开或创建一个android程序后,设计界面直接不能显示,显示错误:(可能是 ...
- 可视化流程设计——流程设计器演示(基于Silverlight)
上一篇文章<通用流程设计>对鄙人写的通用流程做了一定的介绍,并奉上了相关源码.但一个好的流程设计必少不了流程设计器的支持,本文将针对<通用流程设计>中的流程的设计器做一个简单的 ...
- Type Script 在流程设计器的落地实践
流程设计器项目介绍 从事过BPM行业的大佬必然对流程建模工具非常熟悉,做为WFMC三大体系结构模型中的核心模块,它是工作流的能力模型,其他模块都围绕工作流定义来构建. 成熟的建模工具通过可视化的操作界 ...
- .net erp(办公oa)开发平台架构概要说明之表单设计器
背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图 表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...
- 解析大型.NET ERP系统核心组件 查询设计器 报表设计器 窗体设计器 工作流设计器 任务计划设计器
企业管理软件包含一些公共的组件,这些基础的组件在每个新项目立项阶段就必须考虑.核心的稳定不变功能,方便系统开发与维护,也为系统二次开发提供了诸多便利.比如通用权限管理系统,通用附件管理,通用查询等组件 ...
随机推荐
- 【Azure Redis 缓存】Azure Redis Cluster 在增加分片数时失败分析
问题描述 Azure Redis Cluster 在增加分片数时失败,错误消息为: ResponseBody: { "error": { "details": ...
- 【Azure API 管理】API Management service (APIM) 如何实现禁止外网访问
问题描述 API Management service 设置禁止外网访问,请求通过外网(Internet)将无法解析到APIM的网关地址,只能通过APIM所集成的内网(Virtual Network) ...
- C++基本知识梳理
一.命名空间 概念:命名空间是新定义的一个作用域,里面可以放函数,变量,定义类等,主要用来防止命名冲突. 实现:namespace关键字 命名空间名字{ 命名空间成员 } 注意点: 1.命名空间可以嵌 ...
- MapStruct的一些常规用法
每天坚持写一篇原创文章. 使用过MapStruct之后,再也没用过BeanCopy来复制对象了.确实是非常好用的工具库. MapStruct是一个代码生成器,简化了不同的Java Bean之间映射的处 ...
- Linux 系统进程管理
Linux 系统进程管理 目录 Linux 系统进程管理 一.进程的概述 1.1 什么是进程? 1.2 进程和程序的区别 1.3 进程的生命周期 1.4 进程的运行过程 二. 静态显示进程状态-ps ...
- Alt+Space 快速打开切换程序 - Everything - AutoHotKey
Alt+Space 快速打开切换程序 - Everything - AutoHotKey 需求 电脑切换任务 需要用鼠标找,效率比较低,用快捷键Alt+Space 打开列表,输入指定关键字回车,切换或 ...
- 基于python的多线程串口处理实例源码解析
一 概念 1.简介 该源码可以让串口收发数据并行处理. 2.特性 使用了线程 使用了serial 使用了class 二 源码解析 1.串口读取固定数据函数: def uart_recv_header( ...
- 使用JdbcTemplate
1.使用JdbcTemplate的execute()方法执行SQL语句 Java代码 收藏代码 jdbcTemplate.execute("CREATE TABLE USER (user_ ...
- Android USB开发—USB通信
USB通信两端分别称为:HOST(USB主机) 与 Device(USB从机/USB配件),常见的主机就是我们的计算机.而Android 可以支持USB主机模式与USB配件模式,意思就是Android ...
- 单体JOB向分布式JOB迁移案例
一.背景 1.1前言 相信大家在工作中多多少少都离不开定时任务吧,每个公司对定时任务的具体实现都不同.在一些体量小的公司或者一些个人独立项目,服务可能还是单体的,并且在服务器上只有一台实例部署,大多数 ...