概括來(lái)說(shuō)，用 HT for Web 做可視化主要分為兩部分，也就是 2D 和 3D。這兩部分需要單獨(dú)創(chuàng)建。在它們被創(chuàng)建完成后，我們?cè)侔阉鼈兗傻揭黄稹?/p>

HT for Web 的 2D 部分主要是指 ht.graph.GraphView (簡(jiǎn)稱 GraphView，也就是 2D 圖紙)。所謂 2D 圖紙其本質(zhì)是一個(gè) canvas。我們可以在上面進(jìn)行基本圖形的繪制和編輯，進(jìn)行連線布局，或者渲染動(dòng)畫。GraphView 可以脫離開 3D 單獨(dú)使用，比如用于創(chuàng)建普通網(wǎng)頁(yè)，組態(tài)軟件，組織圖，流程圖等。

本節(jié)我們主要以一個(gè)示例說(shuō)明一下 2D 圖紙的基本概念、功能及用法。其主要包括以下幾部分：

創(chuàng)建2D 圖紙 -（GraphView）

添加節(jié)點(diǎn) -（ht.Node）

坐標(biāo)系與坐標(biāo)轉(zhuǎn)換

添加連線 - （ht.Edge）

動(dòng)畫 - ht.Default.startAnim()

創(chuàng)建2D 圖紙 -（GraphView）

創(chuàng)建2D 圖紙 -（GraphView）

通過(guò) new ht.graph.GraphView() 便可創(chuàng)建一張圖紙。創(chuàng)建完圖紙后，對(duì)于 HT 視圖組件，可以通過(guò) GraphView.addToDOM() 方法將其添加到 DOM 中。addToDOM() 方法本身接收一個(gè)參數(shù)。如果為空，則默認(rèn)添加到 body 下面。也可以通過(guò)傳遞一個(gè) div 將 2D 圖紙固定到頁(yè)面的某個(gè)位置。

對(duì)于新創(chuàng)建的圖紙，其默認(rèn)具有縮放、平移、編輯，以及框選等屬性。我們可以根據(jù)需要對(duì)其進(jìn)行啟用或禁用。

與其他視圖組件一樣，如果不指定 DataModel, GraphView 自身也會(huì)創(chuàng)建一個(gè)空的 DataModel 容器用來(lái)管理所有添加到其里面的各種圖元。通過(guò) GraphView.getDataModel() 或 GraphView.dm() 可以獲取該容器。對(duì)于 GraphView，它支持通過(guò) DataModel.setBackground() 來(lái)配置圖紙的背景顏色。

/*************** 創(chuàng)建一張 2D 圖紙，添加到 body 下，并配置各種屬性 ******************/

const gv = new ht.graph.GraphView();

gv.addToDOM();

gv.setZoomable(true); // 可縮放，默認(rèn)：true

gv.setPannable(true); // 可平移，默認(rèn)：true

gv.setEditable(true); // 圖紙上的 Node 是否可編輯，默認(rèn)：true

gv.setRectSelectable(true); // 是否允許對(duì) Node 進(jìn)行框選，默認(rèn)：true

const dm = gv.getDataModel(); // 獲取圖紙的 DataModel，簡(jiǎn)寫形式：gv.dm()

dm.setBackground('#DADADA'); // 同 dm.setBackground('rgba(218, 218, 218, 1)');

為什么要通過(guò) DataModel 來(lái)設(shè)置圖紙的背景而不是直接操作 GraphView 本身？

在第一節(jié)我們提到過(guò)，為了能將我們創(chuàng)建的 2D/3D 數(shù)據(jù)保存與恢復(fù)，可以通過(guò)對(duì) DataModel 進(jìn)行序列化與反序列化來(lái)實(shí)現(xiàn)。注意，這里的序列化操作針對(duì)的是 DataModel 而不是視圖組件。因此，像如 GraphView 這種視圖組件，其背景顏色這種顯示屬性需要通過(guò)配置到 DataModel 才能保存下來(lái)。而像縮放，平移等操作屬性，則需要根據(jù)項(xiàng)目運(yùn)行需要單獨(dú)配置。

添加節(jié)點(diǎn) -（ht.Node）

有了 2D 圖紙的 DataModel，我們便可以向其添加節(jié)點(diǎn)或者叫圖元。這里我們添加了兩個(gè)機(jī)柜圖標(biāo)。

/**************** 分別創(chuàng)建兩個(gè) HT 節(jié)點(diǎn)并添加到圖紙中 ************************/

const server1 = new ht.Node();

server1.setSize(40, 100); // 節(jié)點(diǎn)寬高。應(yīng)當(dāng)根據(jù)圖片比例設(shè)置，不然會(huì)出現(xiàn)拉伸效果

server1.setPosition(100, 100); // 節(jié)點(diǎn)位置。左上角為（0，0）坐標(biāo)

server1.setImage('assets/server.png'); // 節(jié)點(diǎn)圖片

server1.setName('Server 1'); // 顯示名稱

dm.add(server1); // 添加到 DataModel中，也就是添加到圖紙中

const server2 = new ht.Node();

server2.setSize(40, 100);

server2.setPosition(250, 100);

server2.setImage('assets/server.png');

server2.setName('Server 2');

dm.add(server2); // 注意一定要添加到 DataModel 中

在傳統(tǒng)前端（Vue, React, HTML）的開發(fā)過(guò)程中，要添加一個(gè)節(jié)點(diǎn)，我們往往需要先手動(dòng)創(chuàng)建該節(jié)點(diǎn)（如添加一個(gè) icon）并添加到 HTML 下面。然后通過(guò)數(shù)據(jù)綁定對(duì)該節(jié)點(diǎn)進(jìn)行操作。而在 HT 中，我們只需要將新增的節(jié)點(diǎn)添加到 DataModel 下面。HT 的視圖組件會(huì)監(jiān)聽 DataModel 的變化，自動(dòng)觸發(fā)重新渲染操作。我們對(duì)節(jié)點(diǎn)的所有樣式風(fēng)格配置和操作都可以直接在節(jié)點(diǎn)上進(jìn)行。

節(jié)點(diǎn)配置

ht.Node（簡(jiǎn)稱為 Node）是 2D 圖紙和 3D 場(chǎng)景呈現(xiàn)節(jié)點(diǎn)圖元的基礎(chǔ)類，它繼承自 ht.Data。在 ht.Data 的基礎(chǔ)上，其又新增了位置，大小，旋轉(zhuǎn)，縮放，吸附等屬性。這些屬性都可以通過(guò) set*/get* 來(lái)設(shè)置和獲取。

在 GraphView 中，新增一個(gè) ht.Node 節(jié)點(diǎn)，默認(rèn)其會(huì)顯示一個(gè)電腦圖片。我們可以通過(guò) setImage(image) 方法來(lái)更改。如在上例的代碼中，我們找了一個(gè)機(jī)柜照片并將它給了新增的節(jié)點(diǎn)。

由于機(jī)柜圖片可能很大，我們可以通過(guò) setSize(width, height) 來(lái)對(duì)節(jié)點(diǎn)大小進(jìn)行控制。通過(guò)配置不同的寬高還可以實(shí)現(xiàn)拉伸效果。如果不想要拉伸效果，則可以根據(jù)原始圖片寬高比來(lái)設(shè)置節(jié)點(diǎn)的大小。

坐標(biāo)系與坐標(biāo)轉(zhuǎn)換

添加的節(jié)點(diǎn)如果不指定位置，其默認(rèn)會(huì)被放到（x: 0, y: 0）點(diǎn)。通過(guò) Node.setPosition(x, y) 或 Node.p(x, y) 可以控制節(jié)點(diǎn)的位置。通過(guò) Node.getPosition() 或 Node.p() 可以獲取其坐標(biāo)。在 GraphView 中，如果不手動(dòng)修改節(jié)點(diǎn)的坐標(biāo)，其在 GraphView 中的位置便是固定不變的。

由于 GraphView 本身具有縮放、平移等屬性，因此其里面的節(jié)點(diǎn)顯示在瀏覽器上的位置是不固定的。因此我們可以知道 GraphView 的坐標(biāo)系與瀏覽器的坐標(biāo)系是不一樣的。

實(shí)際上，GraphView 采用的是一個(gè)相對(duì)坐標(biāo)系，其方向與 canvas 一致，即左上角為（0, 0）點(diǎn)。往右為 x 軸的正方向，往下為 y 軸的正方向。通過(guò)以下兩個(gè)方法可以在 GraphView 坐標(biāo)與瀏覽器坐標(biāo)之間進(jìn)行轉(zhuǎn)換。

GraphView.getLogicalPoint(event): 傳入 HTML 事件對(duì)象，將瀏覽器坐標(biāo)轉(zhuǎn)換為 GraphView 中的邏輯坐標(biāo)

GraphView.getScreenPoint(point, y): 傳入 GraphView 中的坐標(biāo)，轉(zhuǎn)換為瀏覽器坐標(biāo)

添加連線 - （ht.Edge）

在添加了兩個(gè)機(jī)柜圖標(biāo)之后，我們現(xiàn)在用連線將他們連接起來(lái)。HT 中的連線是用 ht.Edge 實(shí)現(xiàn)的。

ht.Edge 類型（簡(jiǎn)稱 Edge）用于連接起始和目標(biāo)兩個(gè) Node 節(jié)點(diǎn)，兩個(gè)節(jié)點(diǎn)間可以有多條 Edge 存在，也允許起始和目標(biāo)為同一節(jié)點(diǎn)。 可通過(guò) new ht.Edge(source, target) 直接在構(gòu)造函數(shù)中傳入 source 和 target 節(jié)點(diǎn)對(duì)象，也可構(gòu)建 Edge 對(duì)象之后再分別設(shè)置。

getSource() 和 setScource(node) 獲取和設(shè)置起始節(jié)點(diǎn)

getTarget() 和 setTarget(node) 獲取和設(shè)置目標(biāo)節(jié)點(diǎn)

isLooped() 判斷連線的起始和目標(biāo)是否為同一節(jié)點(diǎn)

/****************************** 創(chuàng)建連線 *************************************/

const edges = [];

// 創(chuàng)建三條連線連接 server1 和 server2

edges.push(createEdge(4, 'green', 6, 'yellow', [20, 10]));

edges.push(createEdge(3, '#fff', 3, '#000', [10, 10])); // 黑白線

edges.push(createEdge(10, 'rgb(51,153,255)', 5, 'rgb(242,83,75)', [5, 10])); // 紅藍(lán)線

function createEdge(width, color, dashWidth, dashColor, pattern) {

const edge = new ht.Edge(server1, server2);

edge.s({

'edge.width': width, // 連線寬度

'edge.gap': 30, // 連線與連線的距離

'edge.color': color, // 連線顏色。也可使用 rgb 或16進(jìn)制顏色

'edge.dash': true, // 是否使用虛線

'edge.dash.width': dashWidth, // 虛線寬度

'edge.dash.color': dashColor, // 虛線顏色

'edge.dash.pattern': pattern, // 虛線與連線的占比。[虛線, 連線]

'edge.offset': 0, // 偏移

});

dm.add(edge); // 注意一定要添加到 DataModel 中

return edge;

}

// 創(chuàng)建第四條連線用于 server1 自連線

const edge = new ht.Edge();

edge.setSource(server1);

edge.setTarget(server1);

edge.s({

'edge.width': 5, // 連線寬度

'edge.gap': 30, // 連線與連線的距離

'edge.color': 'pink', // 連線顏色。也可使用 rgb 或16進(jìn)制顏色

'edge.dash': true, // 是否使用虛線

'edge.dash.width': 5, // 虛線寬度

'edge.dash.color': 'purple', // 虛線顏色

'edge.dash.pattern': [10, 10], // 虛線與連線的占比。[虛線, 連線]

'edge.offset': 0, // 偏移

});

dm.add(edge); // 注意一定要添加到 DataModel 中

edges.push(edge);

上面的代碼創(chuàng)建了4條 Edge，其中前三條分別是連接 server1 和 server2，第四條是 server1 自連接。ht.Edge 的屬性主要是由 edge.s() 方法來(lái)配置，該方法是 edge.setStyle() 的簡(jiǎn)寫形式。edge.s() 主要用來(lái)配置節(jié)點(diǎn)內(nèi)置的屬性。HT for Web 引擎會(huì)根據(jù)屬性鍵值來(lái)渲染不同的效果。如果想要設(shè)置自定義屬性，需要使用 edge.a() 來(lái)實(shí)現(xiàn)。

與 ht.Node 相同的是，ht.Edge 也是由 ht.Data 擴(kuò)展而來(lái)。但在大部分情況下，其又有自己的特點(diǎn)：

需要設(shè)置起始節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)。二者可以為同一個(gè)節(jié)點(diǎn)（如上例最后一條 Edge）。

缺少起始或目標(biāo)節(jié)點(diǎn)的 Edge 不會(huì)在圖紙上顯示。

Edge 會(huì)跟隨節(jié)點(diǎn)移動(dòng)。也就是說(shuō)當(dāng)我們拖動(dòng)起始節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的時(shí)候，其所相關(guān)的 Edge 會(huì)跟隨移動(dòng)。

由于 Edge 的位置由兩個(gè)端點(diǎn)決定，因此 Edge 不支持 getPosition()/setPosition() 方法。同樣的，其寬度是在 edge.s() 中配置的，因此 Edge 也不支持 getSize()/setSize() 方法。

除了上面示例中的配置，ht.Edge 還支持自定義連線類型。如果嫌麻煩，也可以使用 HT 內(nèi)置的十幾種連線類型，如 edge.s(’edge.type’, ‘boundary’) 就代表連線僅連接到圖元矩形邊緣。如果要使用內(nèi)置連線類型，需要引入連線類型插件：

在創(chuàng)建了連線后，如何讓它們流動(dòng)起來(lái)呢？這里就用到了動(dòng)畫功能。

動(dòng)畫 - ht.Default.startAnim()

要實(shí)現(xiàn)動(dòng)畫功能，不外乎有這樣幾個(gè)關(guān)鍵屬性：動(dòng)畫播放時(shí)長(zhǎng)，播放過(guò)程中的屬性變化，播放完的回調(diào)事件。

HT 支持多種方式來(lái)實(shí)現(xiàn)動(dòng)畫。這里我們選擇一種比較常用的。先來(lái)看代碼：

/****************************** 連線動(dòng)畫 *************************************/

const animParams = {

// frames: 12, // 動(dòng)畫幀數(shù)

// interval: 10, // 動(dòng)畫幀間隔毫秒數(shù)

duration: 2000, // 動(dòng)畫播放時(shí)長(zhǎng)

easing: function(t){ return t * t; }, // 動(dòng)畫緩動(dòng)函數(shù)，默認(rèn)采用`ht.Default.animEasing`

finishFunc: function(){

ht.Default.startAnim(animParams);

}, // 動(dòng)畫結(jié)束后調(diào)用的函數(shù)。

action: function(v, t){ // action函數(shù)必須提供，實(shí)現(xiàn)動(dòng)畫過(guò)程中的屬性變化。v代表通過(guò)easing(t)函數(shù)運(yùn)算后的值，t代表當(dāng)前動(dòng)畫進(jìn)行的進(jìn)度，范圍：[0~1]

edges.forEach((edge, index) => {

const direction = index%2 == 0 ? 1 : -1;

edge.s('edge.dash.offset', t * 20 * direction);

});

}

};

ht.Default.startAnim(animParams);

這里 HT 用于播放動(dòng)畫的方法是 ht.Default.startAnim(animParams)，該方法會(huì)返回一個(gè) anim 對(duì)象，可調(diào)用anim.stop(true) 終止動(dòng)畫。同時(shí) anim 還具有 anim.pause() 和 anim.resume() 方法可用來(lái)中斷和繼續(xù)動(dòng)畫功能， 以及 anim.isRunning() 函數(shù)判斷動(dòng)畫是否正在進(jìn)行。

該方法所使用的參數(shù)也很簡(jiǎn)單：

duration: 動(dòng)畫播放時(shí)長(zhǎng)。如果想精確地控制動(dòng)畫播放幀數(shù)及幀間隔，我們也可以用 frames + interval 的形式來(lái)控制動(dòng)畫播放。

easing: 緩動(dòng)函數(shù)。使用數(shù)學(xué)公式來(lái)控制動(dòng)畫播放的速度與快慢?？蓞⒖?/p>

finishFunc: 播放完回調(diào)。在動(dòng)畫結(jié)束后，該方法會(huì)被執(zhí)行。

action: 動(dòng)作控制。節(jié)點(diǎn)的哪些屬性需要變化都是在這里定義。如控制節(jié)點(diǎn)的位置，旋轉(zhuǎn)，大小等。在動(dòng)畫執(zhí)行過(guò)程中的每一幀都會(huì)調(diào)用一次該方法。其中的兩個(gè)參數(shù)分別是：

t: 代表當(dāng)前動(dòng)畫進(jìn)行的進(jìn)度。其范圍是從開始執(zhí)行0到執(zhí)行結(jié)束1。該值的變化隨著時(shí)間前進(jìn)，是相對(duì)均勻的。如果我們想要?jiǎng)赢媱蛩賵?zhí)行，這里可以用 t 來(lái)實(shí)現(xiàn)。

v: 代表通過(guò) easing(t) 函數(shù)運(yùn)算后的值。其范圍在大部分情況下也是從0到1。但是這里的 v 值在變化上由 easing(t) 函數(shù)決定，不一定是均勻的。對(duì)于有的緩動(dòng)效果，如 easeOutBack () ，其 v 值在中間階段就可能大于1。如果想要在動(dòng)畫中使用緩動(dòng)效果，這里就需要使用 v 參數(shù)來(lái)控制屬性變化。

小結(jié)

本節(jié)我們主要介紹了 HT for Web 圖紙的創(chuàng)建與基本配置。在 GraphView 中，我們可以向其 DataModel 添加 ht.Node 來(lái)繪制機(jī)柜。通過(guò) Node.setPosition(x, y) 或 Node.p(x, y) 方法可以控制節(jié)點(diǎn)的位置，并通過(guò) Node.getPosition() 或 Node.p() 方法來(lái)獲取其坐標(biāo)。同時(shí)，GraphView 中的坐標(biāo)系與瀏覽器坐標(biāo)系不同，我們可以使用 GraphView.getLogicalPoint(event) 和 GraphView.getScreenPoint(point, y) 方法在兩種坐標(biāo)系之間進(jìn)行轉(zhuǎn)換。

對(duì)于連線，我們使用 ht.Edge 類型表示。創(chuàng)建 ht.Edge 對(duì)象時(shí)需要傳入起始節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)，同時(shí)可以通過(guò) edge.s() 方法配置其屬性，如寬度、顏色、虛線等。在創(chuàng)建多條連線后，我們可以使用 ht.Default.startAnim(animParams) 方法來(lái)實(shí)現(xiàn)連線動(dòng)畫，其中 animParams 是一個(gè)對(duì)象，包含動(dòng)畫播放時(shí)長(zhǎng)、緩動(dòng)函數(shù)、動(dòng)畫結(jié)束回調(diào)函數(shù)和動(dòng)作控制函數(shù)等參數(shù)。

審核編輯 黃宇