HT for Web (Hightopo) 使用心得（3）- 吸附與錨點(diǎn)

吸附與錨點(diǎn)是 HT for Web 中兩個(gè)比較重要的概念。這兩個(gè)概念在執(zhí)行交互和動(dòng)畫(huà)時(shí)會(huì)經(jīng)常被用到。

吸附，顧名思義，是一個(gè)節(jié)點(diǎn)吸附到另一個(gè)節(jié)點(diǎn)上。就像船底的貝類(lèi)一樣，通過(guò)吸附到船身，在船移動(dòng)的時(shí)候自己也會(huì)跟著移動(dòng)；而錨點(diǎn)，則決定了哪個(gè)位置是該節(jié)點(diǎn)的坐標(biāo)點(diǎn)位置。這里繼續(xù)以船舶為例，錨點(diǎn)就是船舶拋錨后船錨所在點(diǎn)，只不過(guò)船的錨點(diǎn)在船外面，而 HT 節(jié)點(diǎn)的錨點(diǎn)通常在其中心。并且這里的錨鏈?zhǔn)莿傂缘牟荒軓澢?/p>

吸附

HT 既支持 2D 吸附，也支持 3D 吸附。這里我們以 2D 為例說(shuō)明一下其用法。在使用之前，有幾個(gè)方法先在這里介紹一下：

getHost()和setHost(host)獲取和設(shè)置吸附宿主對(duì)象，當(dāng)節(jié)點(diǎn)吸附上宿主圖元時(shí)，宿主移動(dòng)或旋轉(zhuǎn)時(shí)會(huì)帶動(dòng)所有吸附者。

getAttaches()獲取吸附到自身的所有節(jié)點(diǎn)的ht.List類(lèi)型數(shù)組。

onHostChanged(oldHost, newHost)當(dāng)吸附宿主對(duì)象發(fā)生變化時(shí)回調(diào)該函數(shù)，可重載做后續(xù)處理。

handleHostPropertyChange(event)當(dāng)吸附宿主對(duì)象屬性發(fā)生變化時(shí)回調(diào)該函數(shù)，可重載做后續(xù)處理。

isHostOn(node)判斷該圖元是否吸附到指定圖元對(duì)象上。

isLoopedHostOn(node)判斷是否與指定圖元形成環(huán)狀吸附，如A吸附B，B吸附C，C吸附回A，則A，B和C圖元相互環(huán)狀吸附。

在上例中，我們創(chuàng)建了4個(gè)服務(wù)器，并且在他們之間配置了連線。另外我們?cè)谶@里為它們配置了吸附關(guān)系：

Server 4 吸附到 Server 3, Server 3 吸附到 Server 2, Server 2 吸附到 Server 1。

這樣，如果 Server 1 動(dòng)，那么 Server 2 便會(huì)跟著動(dòng)。由于 Server 3 吸附在 Server 2 上，Server 3 也會(huì)跟著移動(dòng)。同理，Server 4 也會(huì)跟著 Server 3 移動(dòng)。

由于前兩篇文章已經(jīng)講過(guò) 2D 圖紙及節(jié)點(diǎn)，連線的創(chuàng)建。這里主要是配置吸附關(guān)系。關(guān)鍵代碼如下：

/**************** 分別創(chuàng)建 HT 節(jié)點(diǎn)并添加到圖紙中 ************************/
// 創(chuàng)建4個(gè)服務(wù)器節(jié)點(diǎn)
const server1 = createServerNode(100, 100, 'Server 1 (Host)', {'label.color': 'red'});
const server2 = createServerNode(300, 100, 'Server 2');
const server3 = createServerNode(100, 300, 'Server 3');
const server4 = createServerNode(300, 300, 'Server 4');
/****************************** 創(chuàng)建連線 *************************************/
......
/****************************** 連線動(dòng)畫(huà) *************************************/
......
/****************************** 設(shè)置吸附 *************************************/
server2.setHost(server1);
server3.setHost(server2);
server4.setHost(server3);

這里面主要的代碼就是 setHost() 那三句。在設(shè)置了 Host 節(jié)點(diǎn)之后，我們可以通過(guò) host.getAttaches() 方法獲取所有吸附到 Host 上的所有節(jié)點(diǎn)。

const attaches = server1.getAttaches(); // 獲取的 ht.List 長(zhǎng)度為1，即只有 server2

需要注意的是，盡管這里獲取的吸附節(jié)點(diǎn)個(gè)數(shù)為1，但由于吸附節(jié)點(diǎn)的遞歸關(guān)系，Server 3 和 Server 4 也會(huì)被間接吸附到 Server 1 上面。

吸附旋轉(zhuǎn)

前面提過(guò)，設(shè)置吸附后的節(jié)點(diǎn)，不但會(huì)跟隨 Host 節(jié)點(diǎn)移動(dòng)，還會(huì)根據(jù) Host 節(jié)點(diǎn)旋轉(zhuǎn)，這是非常有用的一個(gè)功能。其邏輯由 HT for Web 內(nèi)部實(shí)現(xiàn)，我們?cè)谶@里調(diào)用即可。

錨點(diǎn)

如上圖所示，4臺(tái)服務(wù)器都圍繞著一個(gè)中心點(diǎn)旋轉(zhuǎn)，該中心點(diǎn)就是 Server 1 的錨點(diǎn)。同時(shí)，它也是 Server 1 坐標(biāo)所在點(diǎn)。也就是說(shuō)：錨點(diǎn)影響著節(jié)點(diǎn)的坐標(biāo)位置，錨點(diǎn)同時(shí)也是節(jié)點(diǎn)旋轉(zhuǎn)和縮放的中心點(diǎn)。

在 HT 中，錨點(diǎn)是Node上一個(gè)重要的概念。節(jié)點(diǎn)繪制的是一個(gè)矩形區(qū)域，而錨點(diǎn)是決定了矩形區(qū)域中哪個(gè)位置是節(jié)點(diǎn)的坐標(biāo)點(diǎn)位置。

錨點(diǎn)的值是一個(gè)百分比數(shù)值，{x:0,y:0}是在區(qū)域左上角，{x:1,y:1}是在區(qū)域右下角，HT 默認(rèn)以{x:0.5,y:0.5}為錨點(diǎn)，也就是圖元中心點(diǎn)。如果為節(jié)點(diǎn)配置大于1或者小于0則錨點(diǎn)則該錨點(diǎn)將處于節(jié)點(diǎn)矩形區(qū)域之外?？梢酝ㄟ^(guò)node.getAnchor和node.setAnchor獲取和設(shè)置錨點(diǎn)，也可以通過(guò)node.getAnchorX、node.setAnchorX、node.getAnchorY、node.setAnchorY方法單獨(dú)設(shè)置獲取。

? getAnchor()和setAnchor(x, y | {x:0.5,y:0.5})獲取和設(shè)置圖元的錨點(diǎn)，錨點(diǎn)影響著節(jié)點(diǎn)坐標(biāo)位置，錨點(diǎn)同時(shí)也是旋轉(zhuǎn)和縮放的中心點(diǎn)

Hightopo 的官網(wǎng)示例從多個(gè)維度展示了錨點(diǎn)的作用：

在 3D 場(chǎng)景中，其錨點(diǎn)原理上與 2D 類(lèi)似，只不過(guò)這里增加了一個(gè)維度。獲取和設(shè)置錨點(diǎn)的方法如下：

? getAnchor3d()和setAnchor3d(x, y, z | [x, y, z])獲取和設(shè)置圖元的 3D 錨點(diǎn)。需要注意的是，要想單獨(dú)獲取 Z 軸方向上的錨點(diǎn)，這里需要使用 node.getAnchorElevation 而不是 node.getAnchorZ

下圖展示的是一個(gè)六面體在 3D 場(chǎng)景中的錨點(diǎn)位置。HT 節(jié)點(diǎn)默認(rèn)的錨點(diǎn)是 {x: 0.5, y: 0.5, z: 0.5}。這里我們將其改成了 {x: 0, y: 0, z: 0}，因此，這里的坐標(biāo)軸顯示在六面體的一角而不是中心位置。

小結(jié)

本節(jié)我們主要介紹了 HT 的吸附和錨點(diǎn)功能。節(jié)點(diǎn)的吸附可以讓節(jié)點(diǎn)跟隨它所吸附的宿主對(duì)象一起移動(dòng)或旋轉(zhuǎn)。使用 HT 的 setHost() 方法可以設(shè)置節(jié)點(diǎn)的宿主對(duì)象，使用 getAttaches() 方法可以獲取所有吸附到該宿主對(duì)象上的節(jié)點(diǎn)。此外，還介紹了節(jié)點(diǎn)旋轉(zhuǎn)和縮放的中心點(diǎn)——錨點(diǎn)。錨點(diǎn)的值是一個(gè)百分比數(shù)值，HT 默認(rèn)以 {x:0.5,y:0.5} 為錨點(diǎn)，也就是圖元中心點(diǎn)?？梢酝ㄟ^(guò) node.getAnchor() 和 node.setAnchor(x, y | {x:0.5,y:0.5}) 等方法獲取和設(shè)置錨點(diǎn)。

審核編輯 黃宇