摘要

用Vue3+TypeScript+AntVX6實現Web組態(tài)（從技術層面與實現層面進行分析），包含畫布創(chuàng)建、節(jié)點設計、拖拽實現（實際案例）、節(jié)點連線、交互功能，后續(xù)文章持續(xù)更新。

注：本文章可以根據目錄進行導航

文檔支持

AntVX6使用文檔

https://x6.antv.antgroup.com/tutorial/getting-started

AntVX6接口參數文檔

https://x6.antv.antgroup.com/api/graph/graph

SVG基礎文檔

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Introduction

大致描述

個人認為以下圖片為AntVX6的一些基礎關鍵（詳細請見官方文檔）

1.提供了畫布的參數修改=>方便面板的構建

2.提供了節(jié)點的修改=>可以對節(jié)點進行增、刪、改，并且可以定制化操作（增代表增加節(jié)點、刪代表刪除節(jié)點、改代表修改節(jié)點的屬性）

3.元素式Cell是節(jié)點Node、邊Edge的基類，也就是Node、Edge繼承于Cell（Cell有的屬性Node、Edge都有）

元素、節(jié)點、邊對應參數截圖（節(jié)點的學習關鍵是學習元素的參數，詳細見API文檔）：

具體實現

步驟一：繪制畫布

完整代碼如下（使用Vue3+TypeScript構建）

<div id="container"></div>const graph = ref<Graph | null>(null);
onMounted(() => {graph.value = new Graph({width: 1800,height: 1200,panning:true,mousewheel:true,background: {color: '#F2F7FA',},container: document.getElementById('container')!, // 斷言該值不為 nullgrid: {visible: true,type: 'doubleMesh',args: [{color: '#eee', // 主網格線顏色thickness: 1, // 主網格線寬度},{color: '#ddd', // 次網格線顏色thickness: 1, // 次網格線寬度factor: 4, // 主次網格線間隔},],},});
});

代碼解釋：

1.我把graph畫布單獨定義出來，這樣就可以定義更多的自定義屬性（要記住單獨定義完以后要通過graph.value才可以訪問里面的屬性）。

2.設置畫布的大小width、height（官方提供了自動大小autoResize屬性，但是在我代碼上一直有一些小bug所以就用自定義的寬和高，沒有用自動設置的這個參數，需要的可自行研究）

3.Graph 中通過panning和mousewheel配置來實現縮放與平移，鼠標按下畫布后移動時會拖拽畫布，滾動鼠標滾輪會縮放畫布。

4.background為背景色（官方提供自定義背景，并且可以放置圖片）

5.配置繪制畫布對應的頁面區(qū)域，并且加上！斷言不為空（解決TS報可能為空的錯誤）

container: document.getElementById('container')!, // 斷言該值不為 null

6.設置網格grid（可以直接復制，目前已知作用是讓畫布更好看）

7.附上對畫布尺寸、位置進行操作一些常用的 API

最終的畫布效果

步驟二：節(jié)點設計

節(jié)點本身構造

節(jié)點本身構造難點：markup與attrs兩個參數，所以我們重點分析。

以下為官方對markup與attrs的解釋：

以下是作者本人對這兩個參數的理解：

1.首先兩者關系是：attrsmarkup（attrs包含于markup，也就是首先要記住attrs是markup中的屬性）

2.舉個形象的例子來說明 attrs 和 markup 的作用，可以想象你正在搭建一個房子，而這個房子的結構（墻壁、窗戶、門等）就是 markup，而你為這些結構上色、裝飾的細節(jié)（顏色、邊框、材質等）就是 attrs。

• markup：定義了房子的組成部分，比如墻、窗戶、門等。你可以通過它告訴 X6：房子有哪些部分，每個部分是什么類型（是矩形？是圖片？是文本？）。
• attrs：用來決定這些部分的樣子。你可以為墻刷上白色油漆、為窗戶加上邊框、為門安裝一個紅色的把手。

3.其實簡單理解就是：markup就是定義當前節(jié)點或邊具有哪些部分，attrs就是改的markup中的對應部分。

4.注意：若加上了markup參數，在 AntV X6 中，markup 是用來定義節(jié)點的結構和內容的，控制著節(jié)點渲染時使用的 SVG 或 HTML 元素。如果你在 markup 中傳遞了空數組（[]），X6 不會自動生成任何內容，因此即使你定義了 shape 和 imageUrl，也不會有任何元素被渲染出來。

      attrs: {},markup: [],

以下代碼則正確顯示節(jié)點。若移除 markup： 如果你移除 markup 屬性，X6 將使用默認的標記來渲染節(jié)點，這樣 shape: ‘image’ 和 imageUrl 的配置會生效，圖像將會被渲染出來。