canvas 网格标绘系统 测试

演示视频在这~
https://www.bilibili.com/video/BV1e8411n79c/?vd_source=a29493ffc689775bd2f04f51a9f74aae

功能点:

1. 网格拖拽
2. 元素在网格上,且随网格移动,有一套相对坐标系统
3. 元素可通过控制点放大缩小旋转
4. 元素可拖拽,也可通过暴露的api移动,有过渡动画
5. 元素可以是系统自带的长方形,三角形,多点的线段,或自定义图片,自定义文字
6. 支持绘制自定义块状元素,暴露上下文,x,y宽高等信息
7. 元素拖拽的辅助线吸附效果
8. 元素可以分组,同一组元素拖拽,组内元素会跟着移动
9. 操作的撤销恢复操作
10. 键盘事件组合键的封装
11. 以鼠标中心点去放大缩小
12. 元素具有层级,可调整谁覆盖谁
13. 画布放大可以任意点为中心点放大缩小
14. 主文件有暴露增删改查等通用api, 元素点击悬浮等等事件
15. 元素点击后获取焦点样式
16. 支持绘制区域选择区域内的元素
17. 支持元素间连线效果, 连线样式可选择直线,折线或曲线
18. 屏幕外的元素不绘制
19. 元素旋转后的顶点坐标可以计算获取
20. 可设置固定定位,不跟随画布移动
21. 可类似于html元素嵌套元素,子元素跟随父元素移动
22. 简单的矩形碰撞检测
23. 可以网格大小为单位定位,默认是以相对像素大小定位
24. 增加自动寻路功能,寻找一点到另一点的最短路径
25. 双击可编辑文本
26. 右下角有比例尺展示
27. 拖动范围限制
28. 小地图全景导航
    ...
    后续等待更新, 喜欢的话帮忙点个star,栓Q了...
    https://gitee.com/qq_connect-7F0F7CB8A/vue-grid-plotting-system.git