摘要

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

注：本文章可以根據(jù)目錄進(jìn)行導(dǎo)航

文檔支持

AntVX6使用文檔

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

AntVX6接口參數(shù)文檔

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

SVG基礎(chǔ)文檔

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

大致描述

個(gè)人認(rèn)為以下圖片為AntVX6的一些基礎(chǔ)關(guān)鍵（詳細(xì)請(qǐng)見(jiàn)官方文檔）

1.提供了畫(huà)布的參數(shù)修改=>方便面板的構(gòu)建

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

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

元素、節(jié)點(diǎn)、邊對(duì)應(yīng)參數(shù)截圖（節(jié)點(diǎn)的學(xué)習(xí)關(guān)鍵是學(xué)習(xí)元素的參數(shù)，詳細(xì)見(jiàn)API文檔）：

具體實(shí)現(xiàn)

步驟一：繪制畫(huà)布

完整代碼如下（使用Vue3+TypeScript構(gòu)建）

<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', // 主網(wǎng)格線顏色thickness: 1, // 主網(wǎng)格線寬度},{color: '#ddd', // 次網(wǎng)格線顏色thickness: 1, // 次網(wǎng)格線寬度f(wàn)actor: 4, // 主次網(wǎng)格線間隔},],},});
});

代碼解釋：

1.我把graph畫(huà)布單獨(dú)定義出來(lái)，這樣就可以定義更多的自定義屬性（要記住單獨(dú)定義完以后要通過(guò)graph.value才可以訪問(wèn)里面的屬性）。

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

3.Graph 中通過(guò)panning和mousewheel配置來(lái)實(shí)現(xiàn)縮放與平移，鼠標(biāo)按下畫(huà)布后移動(dòng)時(shí)會(huì)拖拽畫(huà)布，滾動(dòng)鼠標(biāo)滾輪會(huì)縮放畫(huà)布。

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

5.配置繪制畫(huà)布對(duì)應(yīng)的頁(yè)面區(qū)域，并且加上！斷言不為空（解決TS報(bào)可能為空的錯(cuò)誤）

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

6.設(shè)置網(wǎng)格grid（可以直接復(fù)制，目前已知作用是讓畫(huà)布更好看）

7.附上對(duì)畫(huà)布尺寸、位置進(jìn)行操作一些常用的 API

最終的畫(huà)布效果

步驟二：節(jié)點(diǎn)設(shè)計(jì)

節(jié)點(diǎn)本身構(gòu)造

節(jié)點(diǎn)本身構(gòu)造難點(diǎn)：markup與attrs兩個(gè)參數(shù)，所以我們重點(diǎn)分析。

以下為官方對(duì)markup與attrs的解釋：

以下是作者本人對(duì)這兩個(gè)參數(shù)的理解：

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

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

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

3.其實(shí)簡(jiǎn)單理解就是：markup就是定義當(dāng)前節(jié)點(diǎn)或邊具有哪些部分，attrs就是改的markup中的對(duì)應(yīng)部分。

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

      attrs: {},markup: [],

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