第3章图形基础

3、图形基础：坐标系与变换、颜色模型（RGB/HSV）、抗锯齿与渲染管线

在工业HMI开发中，所有自定义控件的绘制都建立在图形学基础之上。本章将深入剖析三个核心概念：坐标系与变换决定了控件的位置与形态；颜色模型决定了视觉信息的编码方式；抗锯齿与渲染管线则决定了最终画面的质量与性能。理解这些基础，是编写高效、美观、稳定的HMI控件的关键。

3.1 坐标系与变换

3.1.1 屏幕坐标系与逻辑坐标系

在HMI开发中，通常存在两种坐标系：

屏幕坐标系（设备坐标系）：原点在左上角，X轴向右，Y轴向下。单位是像素。这是最终渲染的物理坐标。
逻辑坐标系（世界坐标系）：开发者自定义的坐标系，通常用于描述控件的内部结构。例如，一个圆形仪表盘可能定义圆心在(0,0)，半径为100。

绘制时，必须将逻辑坐标转换为屏幕坐标。转换通常涉及平移、缩放和旋转。

3.1.2 基本变换：平移、旋转、缩放

变换是图形操作的核心。在2D图形中，我们使用3x3的仿射变换矩阵来表示这些操作。假设一个点坐标为 (x, y, 1)，变换后的坐标为 (x', y', 1)。

变换类型	矩阵形式	说明
平移 (Tx, Ty)	`[1, 0, Tx; 0, 1, Ty; 0, 0, 1]`	将点移动 (Tx, Ty) 距离
缩放 (Sx, Sy)	`[Sx, 0, 0; 0, Sy, 0; 0, 0, 1]`	沿X轴缩放Sx倍，沿Y轴缩放Sy倍
旋转 (角度θ)	`[cosθ, -sinθ, 0; sinθ, cosθ, 0; 0, 0, 1]`	绕原点逆时针旋转θ度

代码示例（C++风格伪代码，使用Qt QTransform）：

// 定义一个矩形逻辑坐标：左上角(0,0)，右下角(100,50)
QPolygonF rect;
rect << QPointF(0,0) << QPointF(100,0) << QPointF(100,50) << QPointF(0,50);

// 创建变换矩阵：先平移(200, 150)，再旋转45度，最后缩放1.5倍
QTransform transform;
transform.translate(200, 150);
transform.rotate(45);
transform.scale(1.5, 1.5);

// 应用变换
QPolygonF transformedRect = transform.map(rect);

// 此时 transformedRect 即为屏幕坐标系下的最终坐标

3.1.3 变换的复合与顺序

变换矩阵的乘法不满足交换律。变换顺序至关重要。通常，我们按照 缩放 -> 旋转 -> 平移 的顺序进行，以避免旋转和缩放对平移的影响。在代码中，矩阵乘法是从右向左应用的，因此代码书写顺序应与实际变换顺序相反。

经验法则：先写平移，再写旋转，最后写缩放。因为矩阵乘法是右乘，所以实际执行顺序是缩放 -> 旋转 -> 平移。

3.2 颜色模型：RGB与HSV

3.2.1 RGB颜色模型

RGB（红、绿、蓝）是工业HMI中最常用的颜色模型，直接对应显示器的物理像素。每个颜色通道通常用0-255的整数表示。

优点：硬件友好，易于存储和显示。
缺点：不符合人类对颜色的直观感知（如“更亮”、“更饱和”）。

典型应用： 直接设置控件颜色、读取位图数据。

3.2.2 HSV颜色模型

HSV（色相、饱和度、明度）更符合人类视觉感知，非常适合用于HMI中的动态颜色调整（如报警颜色变化、状态指示）。

H (Hue, 色相)：0-360度，表示颜色类型（红、绿、蓝等）。
S (Saturation, 饱和度)：0-1（或0-100%），表示颜色的纯度。0为灰色，1为纯色。
V (Value, 明度)：0-1（或0-100%），表示颜色的明亮程度。0为黑色，1为最亮。

典型应用： 实现颜色渐变、根据数值动态改变颜色（如温度从低到高，H值从蓝渐变到红）。

3.2.3 RGB与HSV的转换

在HMI开发中，经常需要在RGB和HSV之间转换。以下是一个高效的转换算法伪代码：

// RGB (0-255) 转 HSV (H:0-360, S:0-1, V:0-1)
void RGBtoHSV(int r, int g, int b, float &h, float &s, float &v) {
    float rf = r / 255.0f;
    float gf = g / 255.0f;
    float bf = b / 255.0f;
    float maxC = max(rf, max(gf, bf));
    float minC = min(rf, min(gf, bf));
    float delta = maxC - minC;

    v = maxC;
    if (delta == 0) {
        h = 0;
        s = 0;
    } else {
        s = delta / maxC;
        if (maxC == rf) h = 60 * fmod((gf - bf) / delta, 6);
        else if (maxC == gf) h = 60 * ((bf - rf) / delta + 2);
        else h = 60 * ((rf - gf) / delta + 4);
        if (h < 0) h += 360;
    }
}

// HSV 转 RGB (略，原理类似)

3.3 抗锯齿与渲染管线

3.3.1 锯齿现象与抗锯齿原理

当在像素网格上绘制斜线或曲线时，由于像素是离散的，会产生明显的“阶梯状”锯齿。抗锯齿（Anti-Aliasing, AA）通过模糊边缘来消除这种视觉瑕疵。

基本原理：计算图形边缘覆盖像素的面积比例，然后根据比例混合前景色和背景色。
常见方法：
- SSAA (超级采样抗锯齿)：以更高分辨率渲染，再降采样。效果好，但性能开销大。
- MSAA (多重采样抗锯齿)：只对边缘像素进行多重采样。性能与效果平衡，是HMI开发中的首选。
- FXAA (快速近似抗锯齿)：后处理滤镜，对全屏图像进行边缘检测和模糊。速度快，但可能模糊细节。

3.3.2 工业HMI中的抗锯齿策略

在嵌入式HMI中，性能资源有限。建议采用以下策略：

对静态控件（如背景、边框）：使用4x MSAA，在初始化时一次性渲染到位图缓存。
对动态控件（如实时曲线、指针）：使用2x MSAA或FXAA，并配合子像素渲染技术（如ClearType风格），在保证速度的同时减少锯齿。
避免过度抗锯齿：对于纯水平或垂直的线条，不需要抗锯齿。

3.3.3 渲染管线概述

理解渲染管线有助于优化绘制性能。一个简化的2D渲染管线如下：

应用阶段：CPU准备绘制命令（如“画一个红色矩形”），并提交到GPU。
几何阶段：GPU处理顶点坐标，进行变换、裁剪。
光栅化阶段：将几何图形转换为像素片段。此阶段执行抗锯齿计算。
片段处理阶段：对每个像素片段进行颜色计算、纹理采样、Alpha混合。
输出合并阶段：将片段写入帧缓冲区，最终显示到屏幕。

性能优化要点：

减少绘制调用：将多个小图形合并为一个大的绘制命令（批处理）。
使用纹理图集：将多个小图标合并到一张大纹理中，减少纹理切换。
避免频繁的Alpha混合：Alpha混合会降低渲染速度，尽量使用不透明绘制。

3.4 本章小结

坐标系与变换是控件定位与动画的基础；RGB/HSV颜色模型为视觉设计提供了灵活的工具；抗锯齿与渲染管线则直接决定了HMI界面的视觉质量和运行效率。掌握这些图形基础，你将能够编写出既美观又高效的工业HMI自定义控件。

📚 课程目录