開(kāi)始之前
最近有一個(gè)前端項(xiàng)目一個(gè)需求是實(shí)現(xiàn)流程圖繪制，之前一直用ProcessOn畫(huà)一些流程圖乾巧，為這個(gè)需求決定照葫蘆畫(huà)瓢實(shí)現(xiàn)一下ProcessOn的前端。項(xiàng)目為了安全可控決定不使用任何關(guān)于流程圖繪制的框架，所以純手撕實(shí)現(xiàn)蟀悦。在實(shí)現(xiàn)過(guò)程中學(xué)習(xí)到了很多內(nèi)容，記錄一下開(kāi)發(fā)的過(guò)程氧敢，感興趣的朋友可以也跟著這個(gè)系列實(shí)現(xiàn)自己流程圖日戈。
效果展示
-
拖拽生成節(jié)點(diǎn)
圖片1 -
節(jié)點(diǎn)連線
圖片2 -
尋找連接點(diǎn)
圖片3 -
刪除節(jié)點(diǎn)或者連線
圖片4
實(shí)現(xiàn)技術(shù)分析
- HTML5 drag屬性
- 網(wǎng)頁(yè)元素拖拽 mousedown mousemove mouseup
- svg基礎(chǔ) react circle line polyline polygon path
- 簡(jiǎn)易曼哈頓路由算法(智能連線)
- CSS3 animation offeset-path 動(dòng)畫(huà)路徑
