拯救工业组态 HMI 人机界面

在工业互联网、智慧城市、物联网等领域的可视化应用中，2.5D 效果因其独特的优势成为关键设计方向：它既保留了二维图形的性能高效性，又通过立体透视营造出三维空间的层次感，使数据与设备关系一目了然。这种介于纯 2D 与全 3D 之间的视觉表达，既能直观展示复杂系统的空间结构，又规避了完全 3D 场景的算力负担，堪称 Web 可视化场景中的“黄金平衡点”。

HT for Web 作为成熟的 Web 图形引擎，为开发者提供了高效实现这一平衡点的核心技术。其独特价值在于，不仅提供了强大的底层技术支撑，更创新性地打造了面向设计人员的零代码实现路径，彻底革新了 2.5D 可视化的开发范式，大幅提升效率。下面我们会先介绍其革命性的零代码设计方案，再深入解析支撑其灵活性的核心技术原理。

零代码 2.5D 设计与应用

HT for Web 的零代码 2.5D 设计能力重新定义了可视化开发体验。借助其强大的 Drawing 组件库，设计师和开发者无需编写复杂的变换矩阵代码，即可通过直观的可视化操作快速构建出专业级的 2.5D 场景。

核心优势

开发零成本:全程可视化操作，告别编写底层变换代码。

设计迭代敏捷:实时拖拽式参数调整，内置组件级版本快照与回滚机制，加速设计优化。

设计资产复用:跨项目组件库云同步，积累宝贵的设计资源。

倾斜网格辅助:如下图“倾斜网格”功能，一键校准透视比例，快速完成空间布局。

倾斜网格使用

使用方向及案例

01 空间结构可视化

主要运用于建筑/厂区， 清晰呈现多层立体结构、密集设备分布。

智慧医院

以 2.5D 组态形式精准展现多层室内建筑结构与科室、设备分布，优化空间管理与导航。

智能家居

运用 2.5D 视角呈现家庭网络拓扑关系图。设计中巧妙融合 2D 面板的设计原则，应用图扑数字孪生平台中自有丰富的组件进行高效搭建。

智慧园区

集成建筑、能效、停车、安防、能源等系统，以 2.5D 形式横向打通业务，实现“白天-夜晚”模式切换的一体化管控平台。

白天

夜晚

智慧电网

城市电网在设计上尝试融入重金属质感风格，在 2.5D 界面基础上加入 3D 材质设计和灯光氛围感，展现城市电网架构与运行状态。

02 流程监控可视化

主要运用于产线/管网，直观展示线性流动过程与状态连锁反应。

SMT 生产线

轻量化建模展现贴片工艺流程，2.5D 立体呈现工艺走向，图表反馈实时运行数据。

汽车生产线

整合冲压-焊接-涂装-总装等生产工艺，运用卡通二三维组态效果整合。还原汽车生产全过程动画。

数据中心

集成动力、资产、容量、动环监控，利用 2.5D 组态实现流畅图元动态，全面掌控机房状态。

03 拓扑关系可视化

主要运用于网络/电力，有效梳理节点连接与层级嵌套。

再生水厂

选以科幻风格 2.5D 组态，立体展示消化池系统工艺流程与实时运行监测数据。

絮凝剂制备系统

2.5D 效果更具空间立体感，实现与现实场景中相符的空间分布效果。

外来污泥接收系统

直观展示工艺流程分布及各子流程走向。

此外，图扑也利用 HT 搭建了多个电力接线图。不仅能清晰呈现线路连接逻辑与设备参数标注，还可帮助运维人员快速查阅基础接线信息，让复杂的电力拓扑关系更具直观性与空间感。

04 设备机理可视化

主要运用于机械/仪表，透视内部精密结构与运动逻辑。

汽车工厂

通过 2.5D 组态监控形式，对冲压车间、焊装车间、涂装车间（及各车间内冲压设备等核心设施）的作业工序进行数字化还原；按照生产标准流程简化呈现全链路生产脉络。

冲压车间

冲压设备

焊装车间

涂装车间

从智慧电网的金属质感渲染到汽车制造的流水线动态追踪，从智慧医院的建筑结构透视到智能家居的网络拓扑呈现，2.5D 技术正在成为连接数字孪生世界与现实业务的桥梁。它让设备状态可感知、生产流程可追溯、空间关系可计算，最终赋能决策者以全局视角掌控态势。

HT 2.5D 技术解析

HT for Web 提供了两种核心方案来实现 2.5D 效果，适用于不同场景和开发需求。

轴侧切换-数据驱动的动态核心

01 技术原理

通过数学上的斜切变换（Skew Transformation）在二维平面模拟三维空间投影。本质是将标准的二维坐标系，根据自定义的 X 轴和 Y 轴方向向量进行扭曲，从而在保持二维渲染高性能的同时，创造出伪三维的视觉深度和立体感。

轴侧切换功能使用

02 核心优势

• 强大的数据绑定能力：这是其最核心的优势。轴向参数(axisX，axisY)和旋转角度(rotation)等关键属性都可以通过数据模型动态驱动。这意味着物体的朝向、透视角度可以实时响应业务数据的变化（如设备状态、风向、角度传感器数据等）。
• 极高的灵活性：通过精确控制轴向向量，可以模拟出等轴测、二轴测、三轴测等多种 2.5D 投影效果。
• 性能优异：基于标准的 2D Canvas 变换，渲染效率高，适合需要大量动态元素或实时数据更新的场景。

03 适用方向

• 需要根据实时数据动态改变物体透视角度或朝向的场景（如旋转的风扇叶片、可转向的车辆图标、随数据变化的仪表指针）。
• 需要构建复杂、数据驱动的 2.5D 场景，其中大量元素的透视关系需要精确且动态控制.
• 对渲染性能要求较高的交互式应用。

04 代码详解

初始图像获取与图形状态保存

// 从组件配置中获取风扇的图标资源，若无有效图像则终止绘制流程var image = ht.Default.getImage(comp.getValue('fan.icon'));if (!image) return;// 保存当前 Canvas 的完整绘图状态（变换矩阵、样式等），确保后续变换操作不会污染原始绘图环境g.save();

坐标系平移变换

// 获取相关的常量信息var x = rect.x;var y = rect.y;var width = rect.width;var height = rect.height;var size = Math.min(width, height);// 将坐标系原点平移至目标矩形中心点（shiftX, shiftY）。这是轴侧变换的基准点，后续所有变换均基于此中心进行，确保旋转/缩放操作围绕中心展开var shiftX = x + width / 2;var shiftY = y + height / 2;g.translate(shiftX, shiftY);

轴向量归一化处理

// 将用户定义的X/Y轴向量分量除以尺寸最小值（size），实现坐标归一化。此举消除尺寸差异对轴方向的影响，确保不同尺寸元件具有一致的轴向表现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};

仿射变换矩阵构建

/** 应用2D仿射变换矩阵：[ axisX.x axisY.x 0 ][ axisX.y axisY.y 0 ][ 0 0 1 ]该矩阵将标准坐标系映射到自定义轴向空间，实现轴侧投影效果。其中：第一列向量 (axisX.x, axisX.y) 定义新坐标系的X轴方向第二列向量 (axisY.x, axisY.y) 定义新坐标系的Y轴方向**/g.transform(axisX.x, axisX.y, axisY.x, axisY.y, 0, 0);

动态旋转控制

// 在自定义坐标系基础上叠加旋转变换（弧度制）。旋转操作以当前坐标系原点（即元件中心）为轴心，实现元件的动态朝向调整if (rotation) g.rotate(rotation);

轴向调试可视化（可选）

/**在调试模式下绘制50x50的轴向指示器： 红色线段表示X/Y轴正方向 黑色圆点标记轴向终点此功能通过视觉反馈验证坐标系变换的正确性，辅助开发者调试轴向参数**/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);// 在原始矩形区域内绘制图像，关键点：所有变换操作已注入Canvas状态，此时绘制图像会自动应用前述变换链（平移→轴变换→旋转）ht.Default.drawImage(g, image, x, y, width, height, data, view);

状态恢复

// 恢复g.save()保存的原始绘图状态，确保后续绘制不受当前变换链影响，维持图形上下文清洁g.restore();

05 参数说明

Drawing 组件-可视化编辑的便捷利器

01 技术原理

提供一系列预置的、专注于实现特定 2.5D 效果的可视化编辑组件（如变形、倾斜、旋转面板、三维饼图）。用户通过图形化界面操作（拖拽控制点、设置属性面板参数）即可生成或调整 2.5D 图形。

02 核心优势

• 便捷的可视化编辑：无需编写底层变换代码，通过拖拽组件和操作控制点即可快速生成效果，大幅降低技术门槛。
• 快速原型搭建：对于标准的 2.5D 效果（如倾斜的面板、透视变形的物体、三维饼图），可极速项目进程。
• 内置复杂效果：组件封装了如贝塞尔曲线变形、光影渐变、透视投影模拟等较复杂的算法（如变形 Perspective、旋转面板 Rotate Panel、三维饼图 Pie3D），开箱即用，避免重复造轮子。

03 适用方向

• 需要快速构建静态或半静态的 2.5D 展示场景（如展示界面、说明图、固定角度的示意图）。
• 制作标准化的、具有立体感的 2.5D 图表（如三维饼图）。
• 需要实现特定预置效果（如透视变形、固定模式的倾斜）。
• 开发人员或设计师更倾向于可视化操作而非编码的场景。

04 关键组件概览

变形 Perspective

原理

基于贝塞尔曲线的顶点编辑技术，实现非规则物体的透视变形。

实现流程

菜单栏【绘图组件】→ 拖拽"变形"组件至编辑区 → 关闭“可移动”属性 → 关联图标文件 → 拖动控制点实时调整几何形状。

变形组件使用

倾斜 Skew

原理

通过图形化界面调整斜切角度，实现元素倾斜。其原理是数学矩阵变换在二维平面模拟三维空间关系。

实现流程

菜单栏【绘图组件】→ 拖拽"变形"组件至编辑区 → 关闭“可移动”属性 → 关联图标文件 → 拖动控制点实时调整几何形状。

倾斜组件使用

旋转面板 Rotate Panel

原理

模拟摄像机透视投影效果，自动维持元素空间关系，可调节透视强度，支持双轴旋转控制。

实现流程

菜单栏【绘图组件】→ 拖拽"变形"组件至编辑区 → 关闭“可移动”属性 → 关联图标文件 → 拖动控制点实时调整几何形状。

旋转面板组件使用

三维饼图 Pie3D

原理

通过多层叠加+光影渐变算法实现伪 3D 饼图组件。

实现流程

菜单栏【绘图组件】→ 拖拽"变形"组件至编辑区 → 关闭“可移动”属性 → 关联图标文件 → 拖动控制点实时调整几何形状。

三维饼图组件使用

通用动画 CommonAnimation

原理

与轴侧切换一致，本质是将标准的二维坐标系，根据自定义的 X 轴和 Y 轴方向向量进行扭曲。

实现流程

菜单栏【绘图组件】→ 拖拽"变形"组件至编辑区 → 关闭“可移动”属性 → 关联图标文件 → 拖动控制点实时调整几何形状。

通用动画组件使用

在数字化转型的浪潮中，HT for Web 的 2.5D 技术以独特的工程美学重新定义了工业可视化：它完美融合了二维技术的轻量高效与三维空间的深度层次，在性能与表现力之间建立了精妙的平衡点。通过 Drawing 组件的零代码敏捷设计与轴测变换的数据驱动灵活性，通过轴侧切换的数学精确性和 Drawing 组件的灵活创造力，开发者得以用二维的开发效率，实现三维的空间表达能力。