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

吸附與錨點是 HT for Web 中兩個比較重要的概念。這兩個概念在執(zhí)行交互和動畫時會經(jīng)常被用到。

吸附，顧名思義，是一個節(jié)點吸附到另一個節(jié)點上。就像船底的貝類一樣，通過吸附到船身，在船移動的時候自己也會跟著移動；而錨點，則決定了哪個位置是該節(jié)點的坐標點位置。這里繼續(xù)以船舶為例，錨點就是船舶拋錨后船錨所在點，只不過船的錨點在船外面，而 HT 節(jié)點的錨點通常在其中心。并且這里的錨鏈是剛性的不能彎曲。

吸附

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

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

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

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

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

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

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

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

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

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

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

/**************** 分別創(chuàng)建 HT 節(jié)點并添加到圖紙中 ************************/
// 創(chuàng)建4個服務(wù)器節(jié)點
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)建連線 *************************************/
......
/****************************** 連線動畫 *************************************/
......
/****************************** 設(shè)置吸附 *************************************/
server2.setHost(server1);
server3.setHost(server2);
server4.setHost(server3);

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

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

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

吸附旋轉(zhuǎn)

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

錨點

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

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

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

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

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

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

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

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

小結(jié)

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

審核編輯 黃宇