序

從今天開始，我將記錄使用antv/x6開發(fā)ra-arch的過程。一方面是為了參加日更挑戰(zhàn)，另一方面是為了整理一下antv/x6開發(fā)思路，為以后同類需求開發(fā)提供經(jīng)驗。

需求分析

1、畫布分層及主菜單

• 畫布由上而下分為用戶層、接入層、邏輯層、存儲層這四層
• 可靈活配置，實現(xiàn)畫布分為多層
• 每一層可自由改變寬高
• 主菜單功能實現(xiàn)：放大、縮小、撤銷、恢復等，菜單功能多多益善

2、元器件屬性

• 元器件拖到某一層后，不能再次拖到其它層
• 右鍵點擊元器件，彈出相應菜單：至少包含“編輯”、“刪除”，“編輯”：可修改 元器件寬高配置

3、元器件連線

• 相鄰兩層的元器件可自由連線
• 連線可刪除

4、存儲及導出

• 在線設(shè)計的架構(gòu)圖數(shù)據(jù)可保存并可從存儲中恢復
• 在線設(shè)計的架構(gòu)圖可導出為圖片

5、可配置

• 相關(guān)參數(shù)或功能可配置，比如：通過接口參數(shù)變化，實現(xiàn)菜單變化

效果圖

效果圖.png