项目介绍

1.功能点

dgiot-konva-editior 是基于konvajs 和 visual-drag-demo 的一个低代码组态编辑器，靠拖拉拽生成页面。

dgiotTopo架构交互图

这是本项目具有的功能点如下

1. 编辑器
2. 自定义组件
3. 拖拽
4. 删除组件、调整图层层级
5. 放大缩小
6. 撤消、重做
7. 组件属性设置
8. 吸附
9. 预览、保存代码
10. 绑定事件
11. 绑定动画
12. 导入 PSD
13. 手机模式
14. 拖拽旋转
15. 复制粘贴剪切
16. 数据交互
17. 发布
18. 多个组件的组合和拆分
19. 文本组件
20. 矩形组件
21. 锁定组件
22. 快捷键
23. 网格线
24. 编辑器快照的另一种实现方式

2.相关文档

1. konva api
2. konva github

3.效果预览

线上预览地址: https://dgiot.github.io/dgiot-konva-editior (dgiot-konva-editior)

快速开始

1.安装Node.js(建议12.x版本)

下载地址: https://nodejs.org/zh-cn/download/

2.安装pnpm

npm i -g pnpm --registry=https://registry.npm.taobao.org

4.初始化 & 开发

cd ./dgiot-konva-editior
// 初始化
pnpm install
// 开发
pnpm dev

建议使用IntelliJ IDEA或者WebStorm开发工具