圖編輯引擎 X6 讓大家久等了

X6 是螞蟻金服 AntV 旗下的圖編輯引擎，X 象形圖編輯場景的關係連接，同時 X6 又是 G6 的孿生兄弟，因此沿用了 G6 中的 6，深究一下，6 源於《 六度分隔理論》，表達了咱們對關係數據、關係網絡的敬畏和着迷。

X6 脫胎於螞蟻實際的業務場景，在此基礎上，咱們完善了圖編輯場景的經常使用擴展，如小地圖、網格系統、對齊線、框選、redo/undo等，內置了圖編輯場景的常規交互和設計，如羣組、連接樁、節點縮放、旋轉、連線交互，並提供了基於 HTML 和 React 低成本定製節點能力。

特性預覽

快速上手

只須要掌握建立畫布、添加節點/邊、更新節點/邊、刪除節點/邊這幾個 API 便可開始使用 X6，而且咱們已將 X6 全部特性提取到畫布的配置項中，系統默認的配置文件 preset.ts  包含 50 多個配置項 300 多行配置代碼，您能夠基於 X6 的配置能力快速定製出本身的畫布。

節點、連線與畫布，圖編輯核心能力

易定製節點

X6 預置了一些經常使用節點樣式，建立節點時經過 shape 來指定使用哪一種圖形來渲染節點便可直接使用，並且絕大部分節點樣式和交互均可被自定義。

然而，實際業務場景中的節點可能要更復雜，預置樣式不知足需求？不要緊，咱們還提供了兩種靈活的自定義節點的方式。一種使用 HTMLElement 或 HTML 代碼片斷來定義節點（使用時將 shape 指定爲 html 便可）；另外一種還能夠使用 React 組件來渲染節點（使用 X6 註冊節點 API 註冊 @antv/x6-react-shape 配合咱家 antd 更是天生一對哦）。

豐富連線和箭頭樣式

內置了直線、曲線、拐線、正交線、關係線、循環線等常見連線樣式和 10 多種箭頭樣式。

網格系統與無限畫布

網格是節點在畫布中定位時最小像素單元，例如當節點的位置是 {x: 12, y: 18} 網格大小爲 5 時，那麼節點渲染到畫布的實際位置將是 {x:10, y: 20}。X6 默認提供了 line 和 dot 兩種風格的網格，而且支持自定義網格大小和顏色。

將 infinite 選項設置爲 true 開啓無限大畫布，當節點/邊移動到畫布邊緣時畫布會自動擴充畫布大小。

交互能力與配套組件，圖編輯不可或缺

連接樁與錨點

經過父子節點和 isPort 選項能夠將指定的 cell 設置爲連接樁，使其具有可鏈接性。錨點是沿節點邊框佈局的固定鏈接點，內置矩形/圓形/橢圓/三角形等邊框佈局，支持定製錨點的數量和位置，當鼠標 hover 到節點是才顯示錨點，在錨點上按下鼠標能夠觸發連線。

點選和框選

點擊節點/邊時選中節點，按下 Cmd/Ctrl 連續點擊能夠同時選中多個節點，經過 rubberband  配置項來開啓框選能力，同時支持 selectionPreview 選項配置選中節點/邊的樣式。

對齊線

對齊線是移動節點排版的輔助工具，默認禁用，能夠經過 guide 配置項開啓和定製對齊線的樣式。

小地圖

支持渲染粒度定製和樣式定製，便是否在小地圖中渲染節點/邊，默認只渲染節點。在小地圖中並不會繪製完整的節點，而是用一個色塊代替節點，色塊顏色支持自定義。

UI 組件

搭建一個複雜的圖編輯應用還須要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 組件，咱們在 x6-components 中提供了一些這樣的 React 組件，能夠搭配 antd 使用。

    

    

最後

很是感謝你的耐心閱讀，X6 仍是個新生兒，雖然內測版早已在內部數據研發(ER圖)、運維中臺(流程圖)等多個產品應用上線，但相信還有不少問題有待完善，歡迎在 GitHub 給咱們反饋問題。若是你對 X6 或者 AntV 旗下的其餘產品感興趣，能夠經過如下渠道關注咱們：

• GitHub：https://github.com/antvis/x6
• AntV 官網：https://antv.vision
• AntV GitHub: https://github.com/antvis

原文連接：https://www.yuque.com/antv/blog/x6-preview-release