README.md · sunny360/konva-designer-sample

# 使用 Konva 实现一个设计器交互

[示例地址](https://xachary.github.io/konva-designer-sample/)

欢迎大家来看看：

[CSDN](https://blog.csdn.net/xachary2/category_12630993.html)

[稀土掘金](https://juejin.cn/column/7353542036232585225)

[博客园](https://blog.csdn.net/xachary2/category_12630993.html)

![image](https://github.com/xachary/konva-designer-sample/assets/16830398/4a995eb9-5756-4ec4-a02d-f3a5eb21189a)

![2](https://github.com/xachary/konva-designer-sample/assets/16830398/e43cc89c-c543-4c22-a029-db867ad8502d)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/3f7f57d7-152b-4131-8cbd-5d94b553df4c)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/4b62f3fe-eb06-4860-a752-6c81b1bf79da)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/bc01aa40-7db0-4c5b-832c-b0eb4c621ab8)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/cfb91af0-a2f8-4fdf-90e9-fd742d4194d5)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/c524d9f0-c865-4ea4-a63b-4070bbec7d32)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/61c34bb4-c0ec-48e6-8b97-359465dffe4a)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/c72d4efb-cbd0-40ce-b50c-9a4ddc772be5)

![2](https://github.com/xachary/konva-designer-sample/assets/16830398/84507b25-080a-45be-a43f-789be6c4ee50)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/eee36c5a-85cc-49e2-b946-678fee4c6c40)

![4](https://github.com/xachary/konva-designer-sample/assets/16830398/a24cdc9f-2b2f-4b20-b7cc-d46e18548600)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/e93e769a-b048-4cde-8aed-a39b38eef844)

![2](https://github.com/xachary/konva-designer-sample/assets/16830398/8054f610-c109-4bfc-9e73-95ac25f6df90)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/6a679cb9-b3c9-48d5-9a48-cdd4e4fdf9ba)

![5](https://github.com/xachary/konva-designer-sample/assets/16830398/729b4054-6583-4c22-99ff-730f88a9ba68)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/ad9035d1-2899-4f9a-8502-ddeb3233075d)

![2](https://github.com/xachary/konva-designer-sample/assets/16830398/b77fd89d-8b92-45f2-802a-066839ebc502)

![3](https://github.com/xachary/konva-designer-sample/assets/16830398/f84b1926-58ea-4770-a9f3-7623cf47af99)

![17f9d43d5b5a450288dcd834416ec412](https://github.com/xachary/konva-designer-sample/assets/16830398/cc8d89b2-9e94-4b2f-a7fb-ec9b9db5aeed)

![chrome_Gw4M1vdxYN](https://github.com/xachary/konva-designer-sample/assets/16830398/a520b866-9e87-4ffb-abc6-8822366ec1cf)

![chrome_R45lPum9dU](https://github.com/xachary/konva-designer-sample/assets/16830398/d38b8e41-6628-4ec7-82b7-35af43f3abc1)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/b6bb083d-0725-4371-b5c2-b4495f0b4ada)

![image](https://github.com/xachary/konva-designer-sample/assets/16830398/d1cdb263-cb6d-470e-a271-caef34988f07)

![image](https://github.com/xachary/konva-designer-sample/assets/16830398/72733e66-b6a5-473a-9ef5-8bc4771876ed)

![1](https://github.com/xachary/konva-designer-sample/assets/16830398/2d6a67cc-f542-465b-aaca-e54aa8749553)

![2](https://github.com/xachary/konva-designer-sample/assets/16830398/afb4b039-7478-4e3e-a1f5-2f7785f007e8)

![image](https://github.com/user-attachments/assets/43370884-c94b-4b0a-a06e-af55bbd7c4ff)

## 功能点

- 无限画布（√）
- 画布拖拽（√）
- 缩放（√）
- 画布网格（√）
- 比例尺（√）
- 坐标参考线（√）
- 把素材从左侧面板拖入设计区域（√）
- 鼠标、键盘移动节点（√）
- 鼠标、键盘单选、多选节点（√）
- 放大缩小所选的“磁贴效果”（基于网格）（√）
- 拖动所选的“磁贴效果”（基于网格）（√）
- 复制、粘贴、删除（√）
- 画布归位（√）
- 层次调整（√）
- 右键菜单（√）
- 导出、导入（√）
- 实时预览窗（√）
- 对齐效果（√）
- 连接线[自动、直线、折线]（√）
- 素材组合[深度]（√）
- 基本图形绘制（线、矩形、圆形）

## 需要解决的

- 自动连接线需优化
- 节点 destory 后 JS event listeners 不降反升

sunny360/konva-designer-sample

简介

发行版

贡献者

近期动态

sunny360/konva-designer-sample .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

sunny360/konva-designer-sample