開(kāi)始
下面我們開(kāi)始實(shí)現(xiàn)流程圖的畫(huà)布功能，從兩個(gè)方面著手，第一個(gè)是畫(huà)布的樣式，包括網(wǎng)格和背景，第二個(gè)是畫(huà)布的操作，包括平移和縮放。首先來(lái)看看兩個(gè)經(jīng)典的流程圖應(yīng)用 Drawio 和 BPMN editor。
從上圖我們可以看到兩種不同的畫(huà)布，帶滾動(dòng)條的和不帶滾動(dòng)條的，兩種類型畫(huà)布都有各自的優(yōu)缺點(diǎn)，比如帶滾動(dòng)條的畫(huà)布可以根據(jù)滾動(dòng)條位置清晰的了解當(dāng)前畫(huà)面處于整個(gè)畫(huà)布的位置，但是滾動(dòng)條在 windows 下樣式不夠美觀。不帶滾動(dòng)條的畫(huà)布也能實(shí)現(xiàn)和滾動(dòng)條畫(huà)布一樣的無(wú)限拖拽、縮放等效果，但是如果畫(huà)布上圖形較分散，容易丟失視野，比較難以查找。
X6 同時(shí)支持上面兩種類型畫(huà)布，在這里我們還是看重畫(huà)布的顏值，所以選擇不帶滾動(dòng)條的，如果需要實(shí)現(xiàn)帶滾動(dòng)條的畫(huà)布，可以參考這里。
實(shí)現(xiàn)
初始化
首先進(jìn)入安裝步驟，如果再 Vue/React/Angular 等項(xiàng)目中使用，可以使用 npm 或者 yarn 進(jìn)行安裝，如果使用 script 標(biāo)簽引入，可以使用 CDN 地址。
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
# cdn
# <script ></script>
然后我們?cè)陧?yè)面上創(chuàng)建一個(gè)容納畫(huà)布的容器：
<div id="container"></div>
接下來(lái)我們就可以初始化一個(gè)畫(huà)布了：
new Graph({
container: document.getElementById('container'),
width: 800,
height: 800,
})
網(wǎng)格與背景
X6 可以在 Grpah 中全局配置網(wǎng)格形態(tài)與樣式，例如下面配置了雙線條網(wǎng)格，主網(wǎng)格尺寸為 10px * 10px，主網(wǎng)格線條顏色為 #E7E8EA，寬度為 1px，次網(wǎng)格線條顏色為 #CBCED3，寬度為 1px，次網(wǎng)格線條之間間隔 4 個(gè)主網(wǎng)格。同樣可以在 Graph 中全局配置畫(huà)布的背景顏色和背景圖片，如果需要配置，可以參考官網(wǎng)。
new Graph({
grid: {
size: 10,
visible: true,
type: 'doubleMesh',
args: [
{
color: '#E7E8EA',
thickness: 1,
},
{
color: '#CBCED3',
thickness: 1,
factor: 4,
},
],
},
})
畫(huà)布呈現(xiàn)的樣式如下圖：
平移與縮放
畫(huà)布的拖拽平移與滾輪縮放是高頻操作，是畫(huà)布需要具備的基本功能。首先來(lái)看拖拽平移，基本用法：
new Graph({
// 等價(jià)于 panning: true
panning: {
enabled: true,
}
})
這樣在按下鼠標(biāo)左鍵，移動(dòng)鼠標(biāo)就可以拖拽畫(huà)布，有些用戶習(xí)慣用右鍵或者觸摸板來(lái)進(jìn)行畫(huà)布的平移操作，X6 也是支持的,其中左鍵移動(dòng)和右鍵移動(dòng)有一個(gè)小小的區(qū)別：在圖形上按下左鍵不會(huì)觸發(fā)畫(huà)布平移，但是右鍵可以。
new Graph({
panning: {
enabled: true,
eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
}
})
在 Graph 上配置 mousewheel 可以實(shí)現(xiàn)畫(huà)布縮放功能，基本用法：
new Graph({
// 等價(jià)于 mousewheel: true
mousewheel: {
enabled: true,
}
})
實(shí)驗(yàn)后發(fā)現(xiàn)三個(gè)問(wèn)題：
- 縮放和平移沖突，滾動(dòng)滾輪或者滑動(dòng)觸摸板的時(shí)候，畫(huà)布既會(huì)縮放，同時(shí)也會(huì)平移
- 畫(huà)布總是按照畫(huà)布中心點(diǎn)進(jìn)行縮放，想要的是按照鼠標(biāo)位置進(jìn)行縮放
- 沒(méi)法控制縮放的最小和最大級(jí)別
閱讀官網(wǎng)文檔后發(fā)現(xiàn)，這些問(wèn)題 X6 都有考慮到，可以用以下方式來(lái)解決：
- 設(shè)置修飾鍵 modifiers 為 ctrl，這樣在觸摸板上使用雙指縮放或者按下 Ctrl 鍵再滾動(dòng)鼠標(biāo)才會(huì)觸發(fā)畫(huà)布縮放，就不會(huì)和拖拽平移沖突
- 設(shè)置 zoomAtMousePosition 為 true，這樣畫(huà)布會(huì)以鼠標(biāo)位置為中心點(diǎn)進(jìn)行縮放
- 設(shè)置 minScale 和 maxScale 可以控制畫(huà)布可縮放的最小和最大級(jí)別
最終的配置和效果如下：
new Graph({
// 等價(jià)于 mousewheel: true
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
modifiers: 'ctrl',
minScale: 0.5,
maxScale: 3,
}
})
最后
從上面實(shí)現(xiàn)的過(guò)程來(lái)看，X6 不僅有完備的功能，而且在每個(gè)功能上考慮得很細(xì)致，通過(guò)組合一些配置項(xiàng)就能完成基本的功能，體現(xiàn)了 X6 開(kāi)箱即用的特點(diǎn)。
