演示視頻在這~
https://www.bilibili.com/video/BV1e8411n79c/?vd_source=a29493ffc689775bd2f04f51a9f74aae

功能點(diǎn):

1. 網(wǎng)格拖拽
2. 元素在網(wǎng)格上,且隨網(wǎng)格移動,有一套相對坐標(biāo)系統(tǒng)
3. 元素可通過控制點(diǎn)放大縮小旋轉(zhuǎn)
4. 元素可拖拽,也可通過暴露的api移動,有過渡動畫
5. 元素可以是系統(tǒng)自帶的長方形,三角形,多點(diǎn)的線段,或自定義圖片,自定義文字
6. 支持繪制自定義塊狀元素,暴露上下文,x,y寬高等信息
7. 元素拖拽的輔助線吸附效果
8. 元素可以分組,同一組元素拖拽,組內(nèi)元素會跟著移動
9. 操作的撤銷恢復(fù)操作
10. 鍵盤事件組合鍵的封裝
11. 以鼠標(biāo)中心點(diǎn)去放大縮小
12. 元素具有層級,可調(diào)整誰覆蓋誰
13. 畫布放大可以任意點(diǎn)為中心點(diǎn)放大縮小
14. 主文件有暴露增刪改查等通用api, 元素點(diǎn)擊懸浮等等事件
15. 元素點(diǎn)擊后獲取焦點(diǎn)樣式
16. 支持繪制區(qū)域選擇區(qū)域內(nèi)的元素
17. 支持元素間連線效果, 連線樣式可選擇直線,折線或曲線
18. 屏幕外的元素不繪制
19. 元素旋轉(zhuǎn)后的頂點(diǎn)坐標(biāo)可以計算獲取
20. 可設(shè)置固定定位,不跟隨畫布移動
21. 可類似于html元素嵌套元素,子元素跟隨父元素移動
22. 簡單的矩形碰撞檢測
23. 可以網(wǎng)格大小為單位定位,默認(rèn)是以相對像素大小定位
24. 增加自動尋路功能,尋找一點(diǎn)到另一點(diǎn)的最短路徑
25. 雙擊可編輯文本
26. 右下角有比例尺展示
27. 拖動范圍限制
28. 小地圖全景導(dǎo)航
    ...
    后續(xù)等待更新, 喜歡的話幫忙點(diǎn)個star,栓Q了...
    https://gitee.com/qq_connect-7F0F7CB8A/vue-grid-plotting-system.git