EGE基础入门篇（一）：绘图基础知识

EGE专栏：EGE专栏

下一篇：EGE基础入门篇（二）：开始使用EGE

---

绘图基础知识

一、 EGE简要介绍与安装

1. EGE介绍

EGE官网

  EGE是windows下的一个C++绘图库(学过C语言就行)，操作简单，可以通过简单地调用实现在窗口上进行绘图，并且增加了鼠标，键盘等交互功能，可以完成简单的程序。

• 单窗口，目前只提供一个窗口，没有提供创建多个窗口的功能
• 目前不跨平台，所以在Linux下无法使用
• 底层使用 GDI/GDI++ 绘图，无硬件加速，满足正常绘图需求，不适用于性能要求较高的场合。

详细介绍见 （一）EGE入门教程

2. EGE的安装

详情见 （二）EGE安装与配置，这里不再赘述。

  当然，如果电脑配置足够，推荐使用 Visual Studio，CLion, Visual Studio Code 等现代IDE作为日常编程工具，这些工具都有良好的代码分析和错误提示，可以帮助分析并减少代码错误。其它如VC6.0 ，Dev-Cpp等过时的IDE则不推荐，容易误入歧途。

二、绘图基础知识与重要概念

1. 屏幕像素

  屏幕上显示的内容其实是由一个个的发光点组成的，点的颜色为三种，即 色光三原色 红绿蓝。

  由红绿蓝光色点组成的一个显示基本单位称为 像素(Pixel)，红绿蓝色点称为子像素(Sub-Pixel)。
  组成像素的子像素排列方式多种多样，子像素的大小并不一致。在标准RGB中，三种子像素点的大小一致。由于像素点的材质不同，同样大小的三种颜色子像素的发光寿命也不同，蓝色像素点的寿命最短，但可以通过增大像素点的方式来提高发光寿命。为了适应面积变化后的子像素点，因此有了与标准RGB不同的排列方式。同时，像素点排列方式被厂商申请，会有专利保护，有时为了绕开专利，其它厂商只能设计其它排列方式。

OLED像素排列汇总更新 https://www.eet-china.com/mp/a120682.html

  但不管怎么排列，抽象成的像素点都是矩形阵列的，每一个圆或方块代表一个像素点。一般的笔记本屏幕分辨率为1920 x 1080，也就是说组成屏幕的像素点阵列，宽为1920个像素点，高为1080个像素点。当然，还有更高分辨率的4K屏和8K屏。

  而我们进行绘图，就是改变这些像素点的颜色，从而达到显示图像的目的，组成图像的像素较少且比较大时，我们会明显看到图形由一个个的格子组成，但是当图像的分辨率足够且人眼距离屏幕足够距离时，人眼难以分辨出这些格子，就能看到细腻的图像。

2. 窗口坐标系(屏幕坐标系)

  想要控制每一个像素，需要用一个工具来标识每一个像素，那就是平面坐标系，建立了坐标系后，就能用坐标来表示每一个像素。
  像素数量是有限的，因此可以用整数坐标来表示像素的位置，坐标用非负数来表示。

2.1 窗口坐标系的方向

  我们在学习数学时，见到的平面直角坐标系的坐标轴方向为： 水平向右为x轴正方向，垂直向上为y轴正方向
  如下图所示：

  但是，屏幕坐标系 或 窗口坐标系 却和上面的坐标系不一样：水平向右为x轴正方向，垂直向下为y轴正方向。这和我们阅读时从左到右，从上到下的顺序是一致的，并且早期屏幕也只是用于显示文字，所以这样的坐标系也理所当然。

  在屏幕坐标系的屏幕坐标 $(x,y)$中，$x,y$ 都是大于等于0的整数，与屏幕上的物理像素点一一对应。左上角的像素点对应坐标为 $(0,0)$，如果屏幕宽度为 $\mathrm{width}$ 个像素，高度为 $\mathrm{height}$ 个像素，那么右下角的像素坐标为 $(\mathrm{width}-1,\mathrm{height}-1)$。对于屏幕上的每一个像素，都可以用坐标 $(x,y)$ 表示，其中 $x\in [0,\mathrm{width}-1],y\in [0,\mathrm{height}-1]$。

2.2 平面直角坐标系到窗口坐标系的转换

  如果需要将窗口按照平时数学上的平面直角坐标系来绘图，应将坐标进行转换，转换到窗口坐标系上。
  如下图，在以窗口中心为原点的平面直角坐标系上，假设窗口宽度为 $width$, 高度为 $height$， 有一个点 $(x_0,y_0)$.
  那么这个点所在的位置，在窗口坐标系的对应的坐标应该为
$$(\frac{width}{2}+x_0,\frac{height}{2}-y_0)\text{\hspace{1em}(2.2.1)}$$   按照这个公式进行转换即可。

  假设在窗口坐标系上绘制像素点的函数为

void drawPixel(int x, int y);

  如果窗口大小为宽 640, 高480，那么在以窗口中心为原点的平面直角坐标系上，绘制点的函数可以写成：

#define WINDOW_WIDTH  640
#define WINDOW_HEIGHT 480

void drawPoint(int x, int y)
{
	drawPixel(WINDOW_WIDTH  / 2 + x, WINDOW_HEIGHT / 2 - y);
}

3. 颜色模型

  像素点的颜色有多种表示方法，因为像素点是由红绿蓝三种颜色的子像素组成，所以最后都会转换为RGB格式颜色。

3.1 RGB颜色模型

  RGB 分别是 Red(红), Green(绿), Blue(蓝) 三个单词的首字母。

  电脑屏幕上的所有颜色，都由这红色绿色蓝色三种色光按照不同的比例混合而成的，不同亮度的三种色光组成了不同的颜色。屏幕上的任何一个颜色都可以由三个分量来表示，每个分量分别对应三种色光的亮度。
  设红绿蓝三个分量的值范围都为 0.0 ~1.0，那么RGB颜色模型如下图所示，也叫 RGB颜色空间，是一个立方体模型。颜色空间中的每一个坐标都代表着由RGB这三个颜色分量所组成的一个颜色值。

3.1.1 颜色的RGB表示

  计算机需要对颜色数据进行存储和表示，数据在计算机中都用二进制来表示。计算机表示的数值都是离散的，并不连续，想提高精度只能用更多位数来表示。
  常见的RGB格式用 一定范围的整数值 来代表 子像素点的亮度。当前大多数的显示屏，子像素的亮度通常用8位二进制来表示，表示范围为 0x0 ~ 0xFF, 即0 ~ 255 。一个像素有三个子像素，那么加起来一共24位。
  对于用8位二进制数来表示的子像素亮度，子像素可以有256个级别的亮度，那么24位一共能表示 $256\times 256\times 256=16777216$ 种颜色，简称为 1600万色 或 千万色，也被称为真彩色，基本达到人眼分辨的极限。

  其它高级的显示器可能用10位二进制来表示一个子颜色的亮度，来获得更细腻丰富的色彩。低端一点的显示器由于成本、材料等因素，会使用5位、6位等较低的位数来表示亮度。

  如下图所示的一个颜色选择界面，右下角的红绿蓝就代表着当前颜色的RGB格式颜色值。（色调，饱和度，亮度则是另一种颜色表示：HSV颜色）

  RGB颜色的每个颜色分量，十六进制值范围为0 ~ 0xFF，即两位的十六进制数。
  一般的表示方法为，将三种颜色分量的值按照红绿蓝的排列进行组合成一个六位的十六进制值，即 #RRGGBB。如一个红3F, 绿80, 蓝D6的RGB颜色，颜色的RGB格式表示为 #3F80D6。
  下图为一个颜色对照表，用RGB格式表示颜色。

颜色对照表 https://bbs.bianzhirensheng.com/color01.html

  在C/C++中，十六进制数值前缀为 0x， 因此在代码中表示十六进制格式的RGB颜色值则为 0xRRGGBB。

3.2 色彩深度

色彩深度即表示存储一个像素颜色所用的位数

  色彩深度越高，可用的颜色也就越多，常用的色彩深度为24位，即真彩色。但是位数高意味着成本更高，并且对数据传输速率要求也更高，因此也会有其它色彩深度的显示屏，在嵌入式中，性能低的芯片会使用较低色彩深度的小显示屏，性能不足难以驱动分辨率、深度更高的显示屏。
  如下图的一块单片机常用的 480 x 272 分辨率的TFT显示屏，262K种颜色，即18位色彩深度。

3.3 Alpha通道 与ARGB格式

Alpha通道也叫透明通道，即表示每个颜色的透明度，当两种颜色进行混合时，就根据两个颜色的Alpha通道值来按比例进行混合，得到一个新的颜色值，达到透明的效果。

  Alpha通道是除RGB三个通道之外的一个特殊通道，有特殊的作用，一般用来作为颜色混合的系数。
  ARGB格式中，Alpha通道占8位，RGB为24位，一共32位，也叫32位真彩色，即在24位真彩色图像的基础上再增加一个表示图像透明度信息的Alpha通道。其实色彩深度依然是24位。ARGB格式的值表示，一般为 0xAARRGGBB 或 0xRRGGBBAA，这个要看库的实现。
  在下图选色卡中，上方有一个长条，可以拖动滑块选色颜色的透明度，当颜色重叠时，就按透明度来对颜色进行比例混合。Alpha值 0 ~ 255分别对应不透明的程度 0% ~ 100%， 0为完全透明，255 为不透明。有些也用透明度来表示，透明度0%表示不透明，透明度100%表示完全透明。透明度和不透明度是相反的意义，但是一般都用Alpha值0都表示完全透明，Alpha 值 255表示完全不透明。

  带Alpha通道的颜色混合如下图。如果没有Alpha通道，那么图形只会是简单的覆盖，底层的会被顶层的遮住，而没有这种透明的效果。

3.4 HSV颜色与HSL颜色

3.4.1 RGB颜色表示的局限性

  RGB 颜色空间是最基本、最常用、面向硬件的颜色空间，比较容易理解。
  RGB 颜色空间利用三个颜色分量的线性组合来表示颜色，任何颜色都与这三个分量有关，而且这三个分量是高度相关的，所以连续变换颜色时并不直观，想对图像的颜色进行调整需要更改这三个分量才行。
  RGB 颜色空间适合于显示系统，却并不适合于图像处理。

3.4.2 HSV(HSB)颜色空间

  HSV空间能够非常直观的表达色彩的明暗，色调，以及鲜艳程度，方便进行颜色之间的对比。
  HSV模型是一个倒锥形模型，如下图所示，可以明显看到，如转轮一般，颜色切换十分自然。

  下面为色相的各个角度所对应的颜色，0°为红色。

  HSV 颜色值由三个部分组成：

分量	含义	取值范围	描述
Hue	色调、色相	0.0 ~ 360.0	0.0位置为红色
Saturation	饱和度	0.0 ~1.0	饱和度越高，颜色越鲜艳(对应圆截面的半径，为0时在圆心，呈灰色)
Value	明度	0.0~1.0	明度越高，颜色越亮。(明度为0时在锥尖，黑色)

  颜色最鲜艳最好看的位置为圆锥底部边缘，即 Value = 1.0, Saturation = 1.0 的位置。

  模型也有表示成如下所示的圆柱，即倒圆锥扩展成圆柱。

3.4.2.1 HSV颜色选择框

  下面便是HSV模型的颜色选择框，特点是彩色渐变，彩色另一端颜色变灰，即饱和度变低，并且附加一个彩色到黑色的选择滑块，用于选择明度。
  实际HSV颜色三个参数的表示，明度和饱和度取值范围的0.0~1.0 用 0~255 或0~100替代(由软件自定)，色相取值范围为 0~360(0和360是同一个颜色)，一般都会显示其对应的RGB颜色。

  HSV颜色选择也有如下形式，外圈选择色相，中间三角选择明度和饱和度，三角顶点颜色分别是黑、白和色相所对应的颜色

3.4.3 HSL颜色空间

  HSL和HSV比较类似，区别在于最后一个。
  可以从模型上看，HSL颜色模型由两个圆锥拼合而成，相比HSV模型多了一个纯白色的锥顶(原为HSV圆锥底部中心点)，中间轴为由纯黑到纯白的渐变，最外边沿依然是颜色最鲜艳。

  下面为色相的各个角度所对应的颜色，0°为红色。

分量	含义	取值范围	描述
Hue	色调、色相	0.0~360.0	0.0位置为红色
Saturation	饱和度	0.0 ~1.0	饱和度值越大，颜色越鲜艳(对应圆截面的半径，为0时在圆心，呈灰色)
Lightness	亮度	0.0~1.0	亮度值越大，颜色越亮(亮度为0时在黑色锥尖，亮度为1时在白色锥尖)

  最鲜艳的颜色在 Saturation = 1.0, Lightness = 0.5 的位置。
  当Lightness = 0时，颜色为纯黑，当Lightness = 1时，颜色为纯白。

  扩展成的圆柱模型

3.4.3.1 HSL的颜色选择

HSL也有多种颜色选择框。

• 以色相和饱和度为主(正方形)，亮度为辅(滑块)
• 以饱和度和亮度为主(正方形)，色相为辅(滑块)

3.4.3.2 HSL与HSV的区分方法

HSL与HSV的区分原理就是：

• HSL颜色当亮度达到最大值时，无论色相和饱和度取值如何，所得颜色都为纯白
• HSV在明度和饱和度最大值时，得到的是最鲜艳的彩色。

所以当我们把亮度或明度调至最大值，再把饱和度调至最大值，如果所得颜色为白色，那就是HSL，如果是彩色，那就是HSV。

4. 背景色、前景色和填充色

  背景色 即图像的底色， 当图像中没有绘制内容时，所具有的颜色就是背景色。
  前景色 即绘制内容的颜色，一般是线条，文字的颜色。
  填充色 即填充图形内部填充部分的颜色。

5. 帧率与刷新频率

  帧 是指视频或动画中的画面。帧数是帧的数量，也就是画面的数量。
  帧率 是以帧称为单位的位图图像连续出现在显示器上的频率（速率），单位为FPS（Frame Per Second，帧每秒）。
  刷新频率，是指显示器每秒读取数据并画面显示在屏幕的次数。刷新频率一般为60Hz，也有更高频率的，如90Hz, 120Hz, 144Hz等。

5.1 帧率与刷新频率的关系

  刷新频率是帧率的实际上限。就是说，就算动画帧率高达1000FPS，但是60Hz刷新频率的屏幕，每秒也只能刷新60次。也就是说每一秒只能看到其中的60帧，其它的帧都是多余的，只能是平白浪费CPU和GPU的运算，所以帧率与刷新频率接近最好。
  控制帧率可以保证动画的流畅度，同时也减少了CPU、GPU的资源消耗。

---

EGE专栏：EGE专栏

下一篇：EGE基础入门篇（二）：开始使用EGE