在工業(yè)互聯(lián)網(wǎng)、智慧城市、物聯(lián)網(wǎng)等領(lǐng)域的可視化應用中，2.5D 效果因其獨特的優(yōu)勢成為關(guān)鍵設計方向：它既保留了二維圖形的性能高效性，又通過立體透視營造出三維空間的層次感，使數(shù)據(jù)與設備關(guān)系一目了然。這種介于純 2D 與全 3D 之間的視覺表達，既能直觀展示復雜系統(tǒng)的空間結(jié)構(gòu)，又規(guī)避了完全 3D 場景的算力負擔，堪稱 Web 可視化場景中的“黃金平衡點”。

HT for Web 作為成熟的 Web 圖形引擎，為開發(fā)者提供了高效實現(xiàn)這一平衡點的核心技術(shù)。其獨特價值在于，不僅提供了強大的底層技術(shù)支撐，更創(chuàng)新性地打造了面向設計人員的零代碼實現(xiàn)路徑，徹底革新了 2.5D 可視化的開發(fā)范式，大幅提升效率。下面我們會先介紹其革命性的零代碼設計方案，再深入解析支撐其靈活性的核心技術(shù)原理。

零代碼 2.5D 設計與應用

HT for Web 的零代碼 2.5D 設計能力重新定義了可視化開發(fā)體驗。借助其強大的 Drawing 組件庫，設計師和開發(fā)者無需編寫復雜的變換矩陣代碼，即可通過直觀的可視化操作快速構(gòu)建出專業(yè)級的 2.5D 場景。

核心優(yōu)勢

開發(fā)零成本:全程可視化操作，告別編寫底層變換代碼。

設計迭代敏捷:實時拖拽式參數(shù)調(diào)整，內(nèi)置組件級版本快照與回滾機制，加速設計優(yōu)化。

設計資產(chǎn)復用:跨項目組件庫云同步，積累寶貴的設計資源。

傾斜網(wǎng)格輔助:如下圖“傾斜網(wǎng)格”功能，一鍵校準透視比例，快速完成空間布局。

傾斜網(wǎng)格使用

使用方向及案例

01 空間結(jié)構(gòu)可視化

主要運用于建筑/廠區(qū)， 清晰呈現(xiàn)多層立體結(jié)構(gòu)、密集設備分布。

智慧醫(yī)院

以 2.5D 組態(tài)形式精準展現(xiàn)多層室內(nèi)建筑結(jié)構(gòu)與科室、設備分布，優(yōu)化空間管理與導航。

智能家居

運用 2.5D 視角呈現(xiàn)家庭網(wǎng)絡拓撲關(guān)系圖。設計中巧妙融合 2D 面板的設計原則，應用圖撲數(shù)字孿生平臺中自有豐富的組件進行高效搭建。

智慧園區(qū)

集成建筑、能效、停車、安防、能源等系統(tǒng)，以 2.5D 形式橫向打通業(yè)務，實現(xiàn)“白天-夜晚”模式切換的一體化管控平臺。

智慧電網(wǎng)

城市電網(wǎng)在設計上嘗試融入重金屬質(zhì)感風格，在 2.5D 界面基礎(chǔ)上加入 3D 材質(zhì)設計和燈光氛圍感，展現(xiàn)城市電網(wǎng)架構(gòu)與運行狀態(tài)。

02 流程監(jiān)控可視化

主要運用于產(chǎn)線/管網(wǎng)，直觀展示線性流動過程與狀態(tài)連鎖反應。

SMT 生產(chǎn)線

輕量化建模展現(xiàn)貼片工藝流程，2.5D 立體呈現(xiàn)工藝走向，圖表反饋實時運行數(shù)據(jù)。

汽車生產(chǎn)線

整合沖壓-焊接-涂裝-總裝等生產(chǎn)工藝，運用卡通二三維組態(tài)效果整合。還原汽車生產(chǎn)全過程動畫。

數(shù)據(jù)中心

集成動力、資產(chǎn)、容量、動環(huán)監(jiān)控，利用 2.5D 組態(tài)實現(xiàn)流暢圖元動態(tài)，全面掌控機房狀態(tài)。

03 拓撲關(guān)系可視化

主要運用于網(wǎng)絡/電力，有效梳理節(jié)點連接與層級嵌套。

再生水廠

選以科幻風格 2.5D 組態(tài)，立體展示消化池系統(tǒng)工藝流程與實時運行監(jiān)測數(shù)據(jù)。

絮凝劑制備系統(tǒng)

2.5D 效果更具空間立體感，實現(xiàn)與現(xiàn)實場景中相符的空間分布效果。

外來污泥接收系統(tǒng)

直觀展示工藝流程分布及各子流程走向。

此外，圖撲也利用 HT 搭建了多個電力接線圖。不僅能清晰呈現(xiàn)線路連接邏輯與設備參數(shù)標注，還可幫助運維人員快速查閱基礎(chǔ)接線信息，讓復雜的電力拓撲關(guān)系更具直觀性與空間感。

04 設備機理可視化

主要運用于機械/儀表，透視內(nèi)部精密結(jié)構(gòu)與運動邏輯。

汽車工廠

通過 2.5D 組態(tài)監(jiān)控形式，對沖壓車間、焊裝車間、涂裝車間（及各車間內(nèi)沖壓設備等核心設施）的作業(yè)工序進行數(shù)字化還原；按照生產(chǎn)標準流程簡化呈現(xiàn)全鏈路生產(chǎn)脈絡。

沖壓車間

沖壓設備

焊裝車間

涂裝車間

從智慧電網(wǎng)的金屬質(zhì)感渲染到汽車制造的流水線動態(tài)追蹤，從智慧醫(yī)院的建筑結(jié)構(gòu)透視到智能家居的網(wǎng)絡拓撲呈現(xiàn)，2.5D 技術(shù)正在成為連接數(shù)字孿生世界與現(xiàn)實業(yè)務的橋梁。它讓設備狀態(tài)可感知、生產(chǎn)流程可追溯、空間關(guān)系可計算，最終賦能決策者以全局視角掌控態(tài)勢。

HT 2.5D 技術(shù)解析

HT for Web 提供了兩種核心方案來實現(xiàn) 2.5D 效果，適用于不同場景和開發(fā)需求。

軸側(cè)切換-數(shù)據(jù)驅(qū)動的動態(tài)核心

01 技術(shù)原理

通過數(shù)學上的斜切變換（Skew Transformation）在二維平面模擬三維空間投影。本質(zhì)是將標準的二維坐標系，根據(jù)自定義的 X 軸和 Y 軸方向向量進行扭曲，從而在保持二維渲染高性能的同時，創(chuàng)造出偽三維的視覺深度和立體感。

軸側(cè)切換功能使用

02 核心優(yōu)勢

強大的數(shù)據(jù)綁定能力：這是其最核心的優(yōu)勢。軸向參數(shù)(axisX，axisY)和旋轉(zhuǎn)角度(rotation)等關(guān)鍵屬性都可以通過數(shù)據(jù)模型動態(tài)驅(qū)動。這意味著物體的朝向、透視角度可以實時響應業(yè)務數(shù)據(jù)的變化（如設備狀態(tài)、風向、角度傳感器數(shù)據(jù)等）。

極高的靈活性：通過精確控制軸向向量，可以模擬出等軸測、二軸測、三軸測等多種 2.5D 投影效果。

性能優(yōu)異：基于標準的 2D Canvas 變換，渲染效率高，適合需要大量動態(tài)元素或?qū)崟r數(shù)據(jù)更新的場景。

03 適用方向

需要根據(jù)實時數(shù)據(jù)動態(tài)改變物體透視角度或朝向的場景（如旋轉(zhuǎn)的風扇葉片、可轉(zhuǎn)向的車輛圖標、隨數(shù)據(jù)變化的儀表指針）。

需要構(gòu)建復雜、數(shù)據(jù)驅(qū)動的 2.5D 場景，其中大量元素的透視關(guān)系需要精確且動態(tài)控制.

對渲染性能要求較高的交互式應用。

04 代碼詳解

初始圖像獲取與圖形狀態(tài)保存

// 從組件配置中獲取風扇的圖標資源，若無有效圖像則終止繪制流程
var image = ht.Default.getImage(comp.getValue('fan.icon'));
if (!image) return;
// 保存當前 Canvas 的完整繪圖狀態(tài)（變換矩陣、樣式等），確保后續(xù)變換操作不會污染原始繪圖環(huán)境
g.save();

坐標系平移變換

// 獲取相關(guān)的常量信息
var x = rect.x;
var y = rect.y;
var width = rect.width;
var height = rect.height;
var size = Math.min(width, height);
// 將坐標系原點平移至目標矩形中心點（shiftX, shiftY）。這是軸側(cè)變換的基準點，后續(xù)所有變換均基于此中心進行，確保旋轉(zhuǎn)/縮放操作圍繞中心展開
var shiftX = x + width / 2;
var shiftY = y + height / 2;
g.translate(shiftX, shiftY);

軸向量歸一化處理

// 將用戶定義的X/Y軸向量分量除以尺寸最小值（size），實現(xiàn)坐標歸一化。此舉消除尺寸差異對軸方向的影響，確保不同尺寸元件具有一致的軸向表現(xiàn)
var axisX = {
    x : comp.getValue('fan.axis.x.x') / size,
    y : comp.getValue('fan.axis.x.y') / size,
};
var axisY = {
    x : comp.getValue('fan.axis.y.x') / size,
    y : comp.getValue('fan.axis.y.y') / size
};

仿射變換矩陣構(gòu)建

/** 
應用2D仿射變換矩陣：
[ axisX.x  axisY.x  0 ]
[ axisX.y  axisY.y  0 ]
[    0        0     1 ]
該矩陣將標準坐標系映射到自定義軸向空間，實現(xiàn)軸側(cè)投影效果。其中：
第一列向量 (axisX.x, axisX.y) 定義新坐標系的X軸方向
第二列向量 (axisY.x, axisY.y) 定義新坐標系的Y軸方向
**/
g.transform(axisX.x, axisX.y, axisY.x, axisY.y, 0, 0);

動態(tài)旋轉(zhuǎn)控制

// 在自定義坐標系基礎(chǔ)上疊加旋轉(zhuǎn)變換（弧度制）。旋轉(zhuǎn)操作以當前坐標系原點（即元件中心）為軸心，實現(xiàn)元件的動態(tài)朝向調(diào)整
if (rotation) g.rotate(rotation);

軸向調(diào)試可視化（可選）

/**
在調(diào)試模式下繪制50x50的軸向指示器：
   紅色線段表示X/Y軸正方向
   黑色圓點標記軸向終點
此功能通過視覺反饋驗證坐標系變換的正確性，輔助開發(fā)者調(diào)試軸向參數(shù)
**/
if (comp.getValue('fan.axis.debug')) {
    g.fillStyle = 'red';
    g.strokeStyle = 'black';


    var debugWidth = 50;
    var debugHeight = 50;


    g.beginPath();
    g.moveTo(0, 0);
    g.lineTo(debugWidth / 2, 0);
    g.stroke();
    g.beginPath();
    g.arc(debugWidth / 2, 0, 3, 0, Math.PI * 2);
    g.fill();


    g.beginPath();
    g.moveTo(0, 0);
    g.lineTo(0, debugHeight / 2);
    g.stroke();
    g.beginPath();
    g.arc(0, debugHeight / 2, 3, 0, Math.PI * 2);
    g.fill();
}

坐標系回撤與圖像渲染

// 逆向平移恢復原始坐標系原點位置
g.translate(-shiftX, -shiftY);
// 在原始矩形區(qū)域內(nèi)繪制圖像，關(guān)鍵點：所有變換操作已注入Canvas狀態(tài)，此時繪制圖像會自動應用前述變換鏈（平移→軸變換→旋轉(zhuǎn)）
ht.Default.drawImage(g, image, x, y, width, height, data, view);

狀態(tài)恢復

// 恢復g.save()保存的原始繪圖狀態(tài)，確保后續(xù)繪制不受當前變換鏈影響，維持圖形上下文清潔
g.restore();

05 參數(shù)說明

Drawing 組件-可視化編輯的便捷利器

01 技術(shù)原理

提供一系列預置的、專注于實現(xiàn)特定 2.5D 效果的可視化編輯組件（如變形、傾斜、旋轉(zhuǎn)面板、三維餅圖）。用戶通過圖形化界面操作（拖拽控制點、設置屬性面板參數(shù)）即可生成或調(diào)整 2.5D 圖形。

02 核心優(yōu)勢

便捷的可視化編輯：無需編寫底層變換代碼，通過拖拽組件和操作控制點即可快速生成效果，大幅降低技術(shù)門檻。

快速原型搭建：對于標準的 2.5D 效果（如傾斜的面板、透視變形的物體、三維餅圖），可極速項目進程。

內(nèi)置復雜效果：組件封裝了如貝塞爾曲線變形、光影漸變、透視投影模擬等較復雜的算法（如變形 Perspective、旋轉(zhuǎn)面板 Rotate Panel、三維餅圖 Pie3D），開箱即用，避免重復造輪子。

03 適用方向

需要快速構(gòu)建靜態(tài)或半靜態(tài)的 2.5D 展示場景（如展示界面、說明圖、固定角度的示意圖）。

制作標準化的、具有立體感的 2.5D 圖表（如三維餅圖）。

需要實現(xiàn)特定預置效果（如透視變形、固定模式的傾斜）。

開發(fā)人員或設計師更傾向于可視化操作而非編碼的場景。

04 關(guān)鍵組件概覽

變形 Perspective

原理

基于貝塞爾曲線的頂點編輯技術(shù)，實現(xiàn)非規(guī)則物體的透視變形。

實現(xiàn)流程

菜單欄【繪圖組件】→ 拖拽"變形"組件至編輯區(qū) → 關(guān)閉“可移動”屬性 → 關(guān)聯(lián)圖標文件 → 拖動控制點實時調(diào)整幾何形狀。

變形組件使用

傾斜 Skew

原理

通過圖形化界面調(diào)整斜切角度，實現(xiàn)元素傾斜。其原理是數(shù)學矩陣變換在二維平面模擬三維空間關(guān)系。

實現(xiàn)流程

菜單欄【繪圖組件】→ 拖拽"變形"組件至編輯區(qū) → 關(guān)閉“可移動”屬性 → 關(guān)聯(lián)圖標文件 → 拖動控制點實時調(diào)整幾何形狀。

傾斜組件使用

旋轉(zhuǎn)面板 Rotate Panel

原理

模擬攝像機透視投影效果，自動維持元素空間關(guān)系，可調(diào)節(jié)透視強度，支持雙軸旋轉(zhuǎn)控制。

實現(xiàn)流程

菜單欄【繪圖組件】→ 拖拽"變形"組件至編輯區(qū) → 關(guān)閉“可移動”屬性 → 關(guān)聯(lián)圖標文件 → 拖動控制點實時調(diào)整幾何形狀。

旋轉(zhuǎn)面板組件使用

三維餅圖 Pie3D

原理

通過多層疊加+光影漸變算法實現(xiàn)偽 3D 餅圖組件。

實現(xiàn)流程

菜單欄【繪圖組件】→ 拖拽"變形"組件至編輯區(qū) → 關(guān)閉“可移動”屬性 → 關(guān)聯(lián)圖標文件 → 拖動控制點實時調(diào)整幾何形狀。

三維餅圖組件使用

通用動畫 CommonAnimation

原理

與軸側(cè)切換一致，本質(zhì)是將標準的二維坐標系，根據(jù)自定義的 X 軸和 Y 軸方向向量進行扭曲。

實現(xiàn)流程

菜單欄【繪圖組件】→ 拖拽"變形"組件至編輯區(qū) → 關(guān)閉“可移動”屬性 → 關(guān)聯(lián)圖標文件 → 拖動控制點實時調(diào)整幾何形狀。

通用動畫組件使用

在數(shù)字化轉(zhuǎn)型的浪潮中，HT for Web 的 2.5D 技術(shù)以獨特的工程美學重新定義了工業(yè)可視化：它完美融合了二維技術(shù)的輕量高效與三維空間的深度層次，在性能與表現(xiàn)力之間建立了精妙的平衡點。通過 Drawing 組件的零代碼敏捷設計與軸測變換的數(shù)據(jù)驅(qū)動靈活性，通過軸側(cè)切換的數(shù)學精確性和 Drawing 組件的靈活創(chuàng)造力，開發(fā)者得以用二維的開發(fā)效率，實現(xiàn)三維的空間表達能力。

審核編輯 黃宇