圖撲 HT 總線式拓?fù)鋱D的可視化實(shí)現(xiàn)

總線拓?fù)涫且环N網(wǎng)絡(luò)結(jié)構(gòu)，所有設(shè)備（如計(jì)算機(jī)、打印機(jī)等）都連接到一個(gè)共同的通信介質(zhì)上，通常是一根電纜，這個(gè)介質(zhì)被稱為"總線"（bus）。總線拓?fù)湓?a target="_blank">工業(yè)控制和嵌入式系統(tǒng)等特定領(lǐng)域中被廣泛應(yīng)用。在圖撲 HT 框架中，我們可以利用 ht.Shape 組件繪制總線，并通過 ht.Edge 組件將各個(gè)設(shè)備節(jié)點(diǎn)連接到總線上。這些連接的視覺表現(xiàn)可通過自定義連線類型靈活定義，從而實(shí)現(xiàn)精確的總線拓?fù)鋱D表示。

上面展示的是一個(gè)總線的示例效果，可以直觀看到所有設(shè)備都連接到了總線上。在具體實(shí)現(xiàn)過程中，最具挑戰(zhàn)性的問題是：如何計(jì)算出總線上距離目標(biāo)節(jié)點(diǎn)坐標(biāo)最近的點(diǎn)?

計(jì)算節(jié)點(diǎn)到總線距離

總線通常由多條直線段組成，因此計(jì)算某一節(jié)點(diǎn)到總線的最短距離可按以下思路進(jìn)行：

將總線分割為多段直線

總線由多個(gè)直線段構(gòu)成，可以取總線上相鄰兩點(diǎn)構(gòu)成一條直線。具體實(shí)現(xiàn)時(shí)，遍歷 points 數(shù)據(jù)，獲取 points[index] 和 points[index+1] 作為線段的兩個(gè)端點(diǎn)。注意，如果設(shè)置了 segments，其中 1 代表新路徑的起點(diǎn)，所以當(dāng) segments[index+1] 為 1 時(shí)應(yīng)跳過。

計(jì)算點(diǎn)到每條直線的距離

獲取每條直線段后，計(jì)算節(jié)點(diǎn)坐標(biāo)到各線段的距離，并將距離值存入一個(gè)集合中。

獲取最短距離

從距離集合中找出最小值，即為節(jié)點(diǎn)到總線的最短距離。

基于上述思路，我們可以實(shí)現(xiàn)一個(gè)總線連線類型。以下是具體的實(shí)現(xiàn)代碼：

// 計(jì)算點(diǎn)到直線的距離，返回結(jié)果是個(gè)對象結(jié)構(gòu)

var pointToInsideLine = function (p1, p2, p) {

var x1 = p1.x,

y1 = p1.y,

x2 = p2.x,

y2 = p2.y,

x = p.x,

y = p.y,

result = {},

dx = x2 - x1,

dy = y2 - y1,

d = Math.sqrt(dx * dx + dy * dy),

ca = dx / d, // cosine

sa = dy / d, // sine

mX = (-x1 + x) * ca + (-y1 + y) * sa;

result.x = x1 + mX * ca;

result.y = y1 + mX * sa;

if (!isPointInLine(result, p1, p2)) {

result.x = Math.abs(result.x - p1.x) < Math.abs(result.x - p2.x) ? p1.x : p2.x;

result.y = Math.abs(result.y - p1.y) < Math.abs(result.y - p2.y) ? p1.y : p2.y;

}

dx = x - result.x;

dy = y - result.y;

result.z = Math.sqrt(dx * dx + dy * dy);

return result;

};

// 判斷點(diǎn)是否在線上

var isPointInLine = function (p, p1, p2) {

return p.x >= Math.min(p1.x, p2.x) &&

p.x <= Math.max(p1.x, p2.x) &&

p.y >= Math.min(p1.y, p2.y) &&

p.y <= Math.max(p1.y, p2.y);

};

// 注冊連線類型

ht.Default.setEdgeType('bus', function (edge) {

var source = edge.getSourceAgent(),

target = edge.getTargetAgent();

var targetP = target.p();

var points = source.getPoints().toArray();

var segments = source.getSegments();

var beginPoint;

for (let i = 0; i < points.length - 1; i++) {

if (segments) {

if (segments[i + 1] === 1) continue;

}

const point1 = points[i];

const point2 = points[i + 1];

const minPosition = pointToInsideLine(point1, point2, targetP);

if (!beginPoint || minPosition.z < beginPoint.z) {

beginPoint = minPosition;

}

}

return {

points: new ht.List([ beginPoint, targetP ]),

segments: new ht.List([1, 2])

};

});

執(zhí)行上述代碼后，我們將得到如下效果：

從上圖可以清楚看出，示例成功獲取了節(jié)點(diǎn)到總線的最近點(diǎn)，并繪制了相應(yīng)的連線節(jié)點(diǎn)。值得注意的是，對于直線段而言，節(jié)點(diǎn)在直線上的投影點(diǎn)即為其距總線最近的點(diǎn)。

視覺美感優(yōu)化

雖然示例已實(shí)現(xiàn)了基礎(chǔ)總線效果，但由于拓?fù)鋱D采用 2.5D 效果，僅計(jì)算投影點(diǎn)可能無法呈現(xiàn)理想的視覺效果。為了增強(qiáng)視覺表現(xiàn)，我們可以考慮讓連線旋轉(zhuǎn)一定角度。為此，我們可以在現(xiàn)有功能的基礎(chǔ)上添加旋轉(zhuǎn)代碼，使連線與整體圖形更加協(xié)調(diào)，提升視覺美感。

ht.Default.setEdgeType('bus', function (edge) {

var source = edge.getSourceAgent(),

target = edge.getTargetAgent();

var targetP = target.p();

var points = source.getPoints().toArray();

var segments = source.getSegments();

var beginPoint, linePoints;

for (let i = 0; i < points.length - 1; i++) {

if (segments) {

if (segments[i + 1] === 1) continue;

}

const point1 = points[i];

const point2 = points[i + 1];

const minPosition = pointToInsideLine(point1, point2, targetP);

if (!beginPoint || minPosition.z < beginPoint.z) {

beginPoint = minPosition;

linePoints = [point1, point2]

}

}

var rotation = angleBetweenLineAndHorizontal(linePoints[0], linePoints[1]);

var rotatePoint = findIntersection([rotatePointAroundAnotherPoint(beginPoint, targetP, rotation), targetP], linePoints);

if(isPointInLine(rotatePoint, linePoints[0], linePoints[1])){

beginPoint = rotatePoint;

}

return {

points: new ht.List([

beginPoint, targetP

]),

segments: new ht.List([1, 2])

};

});

/**

* 計(jì)算兩點(diǎn)之間直線與水平線的夾角

*/

function angleBetweenLineAndHorizontal(p1, p2) {

if (new ht.Math.Vector2(p1.x, p1.y).length() > new ht.Math.Vector2(p2.x, p2.y).length()) {

var p = p2;

p2 = p1;

p1 = p;

}

var x1 = p1.x,

y1 = p1.y,

x2 = p2.x,

y2 = p2.y;

var dx = x2 - x1;

var dy = y2 - y1;

var angleRadians = Math.atan2(dy, dx); // 計(jì)算夾角（弧度）

var angleDegrees = angleRadians * (180 / Math.PI); // 弧度轉(zhuǎn)角

// 確保角度在 0 到 360 之間

if (angleDegrees < 0) {

angleDegrees += 360;

}

return angleDegrees;

}

function rotatePointAroundAnotherPoint(point, center, angleDegrees) {

var angleRadians = angleDegrees * (Math.PI / 180);

var cosTheta = Math.cos(angleRadians);

var sinTheta = Math.sin(angleRadians);

var translatedX = point.x - center.x;

var translatedY = point.y - center.y;

var rotatedX = translatedX * cosTheta - translatedY * sinTheta;

var rotatedY = translatedX * sinTheta + translatedY * cosTheta;

var finalX = rotatedX + center.x;

var finalY = rotatedY + center.y;

return { x: finalX, y: finalY };

}

/**

* 給定兩個(gè)點(diǎn)，計(jì)算直線的系數(shù) A, B, C

* 直線方程：Ax + By = C

*/

function getLineEquation(x1, y1, x2, y2) {

var A = y2 - y1;

var B = x1 - x2;

var C = A * x1 + B * y1;

return { A, B, C };

}

/**

* 計(jì)算兩條直線的交點(diǎn)

*/

function calculateIntersection(line1, line2) {

var { A: A1, B: B1, C: C1 } = line1;

var { A: A2, B: B2, C: C2 } = line2;

var determinant = A1 * B2 - A2 * B1;

if (determinant === 0) {

// 平行或重合

return null;

} else {

var x = (C1 * B2 - C2 * B1) / determinant;

var y = (A1 * C2 - A2 * C1) / determinant;

return { x, y };

}

}

/**

* 找到兩條線的交點(diǎn)，或者延長線的交點(diǎn)

*/

function findIntersection(line1Points, line2Points) {

var [p1, p2] = line1Points;

var [p3, p4] = line2Points;

var line1 = getLineEquation(p1.x, p1.y, p2.x, p2.y);

var line2 = getLineEquation(p3.x, p3.y, p4.x, p4.y);

var intersection = calculateIntersection(line1, line2);

return intersection;

}

實(shí)現(xiàn)的最終效果如下：

圖撲軟件 HT 自定義連線功能為圖形交互設(shè)計(jì)開辟了廣闊的新天地。從基本的"橫-豎-橫"連線到復(fù)雜的總線拓?fù)鋱D，不僅提升了數(shù)據(jù)可視化的靈活性，還大幅增強(qiáng)了用戶體驗(yàn)。通過精細(xì)調(diào)整連線的旋轉(zhuǎn)角度和投影點(diǎn)，在 2.5D 效果中呈現(xiàn)更加美觀和直觀的拓?fù)潢P(guān)系。

不僅適用于網(wǎng)絡(luò)結(jié)構(gòu)的展示，還可擴(kuò)展到各種復(fù)雜系統(tǒng)的可視化中。為設(shè)計(jì)師和開發(fā)者提供了強(qiáng)大的工具，幫助他們創(chuàng)造出更加豐富、富有表現(xiàn)力的圖形界面。

審核編輯 黃宇