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

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

零代碼 2.5D 設(shè)計(jì)與應(yīng)用

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

核心優(yōu)勢(shì)

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

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

設(shè)計(jì)資產(chǎn)復(fù)用:跨項(xiàng)目組件庫(kù)云同步，積累寶貴的設(shè)計(jì)資源。

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

傾斜網(wǎng)格使用

使用方向及案例

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

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

智慧醫(yī)院

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

智能家居

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

智慧園區(qū)

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

智慧電網(wǎng)

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

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

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

SMT 生產(chǎn)線

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

汽車生產(chǎn)線

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

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

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

03 拓?fù)潢P(guān)系可視化

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

再生水廠

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

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

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

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

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

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

04 設(shè)備機(jī)理可視化

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

汽車工廠

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

沖壓車間

沖壓設(shè)備

焊裝車間

涂裝車間

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

HT 2.5D 技術(shù)解析

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

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

01 技術(shù)原理

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

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

02 核心優(yōu)勢(shì)

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

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

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

03 適用方向

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

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

對(duì)渲染性能要求較高的交互式應(yīng)用。

04 代碼詳解

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

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

坐標(biāo)系平移變換

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

軸向量歸一化處理

// 將用戶定義的X/Y軸向量分量除以尺寸最小值（size），實(shí)現(xiàn)坐標(biāo)歸一化。此舉消除尺寸差異對(duì)軸方向的影響，確保不同尺寸元件具有一致的軸向表現(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)建

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

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

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

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

/**
在調(diào)試模式下繪制50x50的軸向指示器：
   紅色線段表示X/Y軸正方向
   黑色圓點(diǎn)標(biāo)記軸向終點(diǎn)
此功能通過(guò)視覺(jué)反饋驗(yàn)證坐標(biāo)系變換的正確性，輔助開(kāi)發(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();
}

坐標(biāo)系回撤與圖像渲染

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

狀態(tài)恢復(fù)

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

05 參數(shù)說(shuō)明

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

01 技術(shù)原理

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

02 核心優(yōu)勢(shì)

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

快速原型搭建：對(duì)于標(biāo)準(zhǔn)的 2.5D 效果（如傾斜的面板、透視變形的物體、三維餅圖），可極速項(xiàng)目進(jìn)程。

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

03 適用方向

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

制作標(biāo)準(zhǔn)化的、具有立體感的 2.5D 圖表（如三維餅圖）。

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

開(kāi)發(fā)人員或設(shè)計(jì)師更傾向于可視化操作而非編碼的場(chǎng)景。

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

變形 Perspective

原理

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

實(shí)現(xiàn)流程

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

變形組件使用

傾斜 Skew

原理

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

實(shí)現(xiàn)流程

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

傾斜組件使用

旋轉(zhuǎn)面板 Rotate Panel

原理

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

實(shí)現(xiàn)流程

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

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

三維餅圖 Pie3D

原理

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

實(shí)現(xiàn)流程

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

三維餅圖組件使用

通用動(dòng)畫 CommonAnimation

原理

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

實(shí)現(xiàn)流程

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

通用動(dòng)畫組件使用

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

審核編輯 黃宇