手撕 ProcessOn前端代碼(一)

開(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)自己流程圖。

效果展示

  1. 拖拽生成節(jié)點(diǎn)


    圖片1

  2. 節(jié)點(diǎn)連線


    圖片2

  3. 尋找連接點(diǎn)


    圖片3

  4. 刪除節(jié)點(diǎn)或者連線


    圖片4

實(shí)現(xiàn)技術(shù)分析

  1. HTML5 drag屬性
  2. 網(wǎng)頁(yè)元素拖拽 mousedown mousemove mouseup
  3. svg基礎(chǔ) react circle line polyline polygon path
  4. 簡(jiǎn)易曼哈頓路由算法(智能連線)
  5. CSS3 animation offeset-path 動(dòng)畫(huà)路徑
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容