EGE基础：颜色篇

EGE专栏：EGE专栏

1. 颜色表示

1.1 RGB颜色

RGB颜色
  用 R (red, 红）, G (green, 绿）, B (blue, 蓝) 三个分量表示。每个分量值为0~255， 用十六进制表示即0x0~0xFF, 值越大，颜色越亮。RGB颜色其实就是透明度为0xFF的ARGB颜色。

EGERGB(R, G, B)
  用三个分量组成一个值， 如红色为0x88, 绿色为0x55, 蓝色为0xFF,则为 EGERGB(0x88, 0x55, 0xFF)，颜色透明度为0xFF

十六进制值 (0xFFRRGGBB)
  (RR=红，GG=绿，BB=蓝)，8位十六进制值，等于EGERGB(0xRR, 0xGG, 0xBB)，FF是透明度值，FF表示不透明, 00表示透明。因为是RGB颜色，所以是不透明。

EGE颜色类型
  EGE用 color_t 类型表示颜色值，其实是unsigned int类型（无符号整型）

下面是设置颜色的几种等效方法

setcolor(0xFF0000A8);			//直接定义颜色数值
setcolor(BLUE);					//利用已定义颜色(推荐)
setcolor(EGERGB(0, 0, 168));	//利用宏(推荐)

EGE中自定义的一些颜色
  下面是EGE自定义的一些颜色常量，可以直接在代码中使用，如BLACK, RED, WHITE,BLUE等。

	// 颜色
enum COLORS {
	BLACK           = 0,							黑色
	BLUE            = EGERGB(0, 0, 0xA8),			蓝色
	GREEN           = EGERGB(0, 0xA8, 0),			绿色
	CYAN            = EGERGB(0, 0xA8, 0xA8),		青色
	RED             = EGERGB(0xA8, 0, 0),			红色
	MAGENTA         = EGERGB(0xA8, 0, 0xA8),		品红色
	BROWN           = EGERGB(0xA8, 0xA8, 0),		棕色
	LIGHTGRAY       = EGERGB(0xA8, 0xA8, 0xA8),		浅灰
	DARKGRAY        = EGERGB(0x54, 0x54, 0x54),		暗灰
	LIGHTBLUE       = EGERGB(0x54, 0x54, 0xFC),		浅蓝
	LIGHTGREEN      = EGERGB(0x54, 0xFC, 0x54),		浅绿
	LIGHTCYAN       = EGERGB(0x54, 0xFC, 0xFC),		浅青
	LIGHTRED        = EGERGB(0xFC, 0x54, 0x54),		浅红
	LIGHTMAGENTA    = EGERGB(0xFC, 0x54, 0xFC),		浅品红
	YELLOW          = EGERGB(0xFC, 0xFC, 0x54),		黄色
	WHITE           = EGERGB(0xFC, 0xFC, 0xFC),		白色
};

  可以看到，颜色分量都为四个值 0, 0x54, 0xA8 和 0xFC其中之一，黑色BLACK是纯黑，但目前的定义中 白色WHITE并不是纯白。

1.2 HSL颜色

HSL颜色 用三个分量表示：

色相(H): 用角度表示，范围0°~360°
饱和度(S)：0 ≤ s < 1
亮度(L)：0 ≤ L < 1
(S = 1, L = 0.5的时候颜色最鲜艳，即上面模型的边缘）

HSL颜色（色相 0 ~ 360度渐变， 饱和度1， 亮度 0.5， ）

1.3 HSV颜色

HSV颜色 用三个分量表示：

色调(H): 用角度表示，范围0°~360°
饱和度(S)：0 ≤ S <1
明度(V): 0 ≤ V < 1
(V = 1的时候颜色最鲜艳，即上面模型的上边缘）

HSV,颜色（色相0 ~ 360度渐变， 饱和度1， 明度1）

可以看到，我们可以给HSV 或HSL一个0° - 360°，就可以得到不断变化的彩色
注意两个模型的不同，最鲜艳的色彩，一个是亮度为 0.5, 一个是明度为 1

1.4 灰度色

  灰度色，就是指纯白、纯黑以及两者中的一系列从黑到白的过渡色。

  下面就是一张灰度图，只有灰度色。

  RGB颜色中，当 RGB 三个分量相等时，就是一个灰度色，一个分量范围为0~255， 所以一共有256种灰度，
  EGE中有用灰度生成对应的用RGB表示的灰度色的宏EGEGRAY()

  EGEGRAY(grey) ：grey的范围是0~255， 返回一个RGB三个分量都等于 grey 的RGB颜色。如 EGEGRAY(0x80), 得到 EGERGB(0x80, 0x80, 0x80)。

1.5 ARGB颜色

  最常用的颜色用 RGB 表示，有时我们看到一些图片有透明效果，能够透过看到后面的背景，这个就是alpha通道的作用。alpha通道代表着图像的透明度信息，值在0~255之间，255代表不透明，0代表完全透明。RGB颜色其实就是透明度为0xFF的ARGB颜色，即颜色不透明。
  加上了alpha通道后，当颜色重叠在一起时，就根据颜色的alpha值，计算颜色各自的比例，最后得到的颜色就相当于透明的效果。
  RGB颜色加上alpha通道后，组成 ARGB 颜色。
颜色的值为0xAARRGGBB, 一共8位，正好占4个字节，一个无符号整型的大小。
  EGE中 ARGB 颜色的表示有下面五种, 都是等价的表示法

• EGERGBA(R, G, B, A);
• EGEARGB(A, R, G, B);
• EGEACOLOR(A, RGBcolor);
• EGECOLORA(RGBcolor, A);
• 0xAARRGGBB

也有生成带alpha通道的灰度颜色的宏

• EGEGRAYA(gray, a)
• EGEAGRAY(a, gray)

2. 绘图颜色

下面关于颜色的函数都有个PIMAGE参数， 不设置则默认NULL，即表示操作的是当前窗口，设置则操作的是PIMAGE所指的图像

EGE中定义了一个颜色类型 color_t， 是个无符号整型(unsigned int)

定义一个颜色变量:

color_t color;

前景色就是绘画时画笔的颜色，画笔用来画线条，写字等，那么前景色就是线条、文字的颜色。
背景色，在一块画布上绘画时，画布一开始是有底色的，这个颜色就是背景色。
填充色，用颜料来对一个色块进行涂色，对区域进行填充，这个颜色就是填充色。

刚打开窗口时，会有一些默认的颜色设置：
背景色： 黑色 (纯黑)
前景色：白色 (比WHITE 暗一些)
填充色：黑色 (纯黑)

2.1 前景色

  背景色是绘画时画笔的颜色，比如线条的颜色，文字的颜色。
获取当前绘图前景色：

 color_t color = getcolor();

设置当前绘图前景色：

color_t color = EGEARGB(0xFF, 0x80, 0xFF, 0xFF);
setcolor(color);

2.2 背景色

获取当前绘图背景色：

color_t bkColor = getbkcolor();

设置当前绘图背景色（设置并做背景色像素替换）：

color_t bkColor = WHITE;
setbkcolor(bkColor); 

快速设置当前绘图背景色（只设置不替换）：

color_t bkColor = WHITE;
setbkcolor_f(bkColor);

  注意了，setbkcolor() 在调用后，会将是原来背景色的像素设置成新背景色的像素。
  而setbkcolor_f() 仅仅是设置背景颜色，并不会做像素颜色的修改。

  所以如果想要清屏，并且改变背景颜色的话，操作一般是先调用 setbkcolor_f()，然后调用 cleardevice(), 而不用setbkcolor()。

setbkcolor_f(color);
cleardevice();

  如果不改变背景颜色的话，只在初始时调用一次setbkcolor(), 后面清屏时直接调用cleardevice() 即可。

2.3 填充色

  填充色是指填充图形内部的颜色。

获取当前绘图填充色：

color_t color = getfillcolor(); 

设置当前绘图填充色：

color_t color = BLUE;
setfillcolor(color);

2.4 透明度

使用ege的高级函数 ege_setalpha() 可以设置图像的透明度（当pimg为NULL时窗口会崩溃， 给图像设置时没问题）

void EGEAPI ege_setalpha(int alpha, PIMAGE pimg = NULL);

2.5 像素颜色

这个可以获取或者设置窗口上坐标为(x, y)的像素点的颜色，可以用来画像素点。

获取像素点(x, y)的颜色：

color_t color = getpixel(x,y);

设置像素点(x, y)的颜色：

color_t color = BLUE;
putpixel(x,y, color);

2.6 文字背景色

  
设置当前文字背景色：

color_t color = BLUE;
setfontbkcolor(color);

2.7 文字背景混合模式

设置背景混合模式(0=OPAQUE, 1=TRANSPARENT)

 setbkmode(int iBkMode);

  一般EGE中使用文字都会加上一句 setbkmode(TRANSPARENT), 将文字背景设置为透明。

3. 获取图像像素点颜色: getpixel()

获取图像中某个像素点的颜色可使用 getpixel() 函数。

函数声明：

color_t getpixel(int x, int y, PIMAGE pimg = NULL);

注意，这个获取的是 ARGB 颜色, 即带有透明度。

使用示例:

color_t ARGBcolor = getpixel(x, y, pimg);

3.1 那如何获取窗口像素点颜色呢

  获取窗口像素点颜色 同样是使用 getpixel() ，可以看到 getpixel() 第三个参数是PIMAGE类型，默认参数为NULL，参数为NULL 时指的就是 窗口。

getpixel() 第三个参数省略或者传入NULL时，即为获取窗口像素点颜色。

获取窗口像素点的ARGB颜色:

color_t ARGBcolor = getpixel(x, y);

获取窗口像素点的RGB颜色，即将透明度设置为0xFF。

color_t RGBcolor = EGEACOLOR(0xFF, getpixel(x, y));

3.2 更快的获取像素操作:getpixel_f()

   getpixel_f() 函数和 getpixel() 函数相比 少了边界判断操作， 也就是说 不判断像素点坐标是否在图像范围内。这样带来的是更快的速度，但牺牲了安全性，可能发生访问越界。可以在确保像素点坐标(x, y)在有效范围内时使用。

  比如遍历图像所有像素点的情况下，就可以使用。遍历时已经确保了坐标的有效性，此时内部无需做边界判断。

示例：

void forEachPixel(PIMAGE pimg)
{
	int width  = getwidth(pimg);
	int height = getheight(pimg);
	
	//遍历图像像素点
	for (int y = 0; y < height; y++) {
		for (int x = 0; x < width; x++) {
			//获取图像像素点颜色
			color_t color = getpixel_f(x, y, pimg);
		}
	}
}

  实际上更快的是利用getbuffer()获取图像的内部缓冲区首地址，直接获取数组值，这样可节省函数调用的开销。

4. 颜色操作

color 为颜色值 (color_t 类型）

4.1 获取color中的颜色分量

得到的分量值的范围为 0~255

int redValue   	= EGEGET_R(color);
int greenValue 	= EGEGET_G(color);
int blueValue  	= EGEGET_B(color);
int alpha		= EGEGET_A(color);

4.2 颜色合成

color = EGERGB(redValue, greenValue, blueValue);

4.3 颜色转换

RGB 转 BGR

bgrColor = RGBTOBGR(rgbColor);

RGB 与 HSL 互转:

(函数名中，常用2 表示 to，英文 2 和 to 读音相同,表示转换的意思， 下面可以解释成 rgb to hsl 和 hsl to rgb)

hslColor = rgb2hsl(rgbColor);
rgbColor = hsl2rgb(hslColor);

RGB 与 HSV 互转：

hsvColor = rgb2hsv(rgbColor);
rgbColor = hsv2rgb(hsvColor);

RGB 转 灰度 ：

grayColor = rgb2gray(rgbColor);

ARGB 转 RGB (把透明度设置为0xFF)：

RGBColor = EGEACOLOR(0xFF, ARGBcolor);

5. 区域颜色填充

在图像上已经绘制有图形的情况下，可以对图形进行填充，达到填充颜色或修改颜色的效果。

填充之前，确保填充颜色正确，可使用setfillcolor()设置填充颜色。

设置填充颜色

函数声明：

void setfillcolor(color_t color, PIMAGE pimg = NULL);

5.1 封闭图形内部填充

  将一个边界颜色为border的封闭图形内部填充颜色，x, y为封闭图形内部的某个点。填充的颜色由 setfillcolor() 指定。

函数声明：

void floodfill(int x, int y, color_t borderColor, PIMAGE pimg = NULL);

  如下图，想要将下面的圆内部涂成浅蓝色，先要找到圆内部的一个点位置(在内部就行，不能在边界处，边界处无法填充），然后确定边界的颜色。例如下面圆的边界颜色是红色RED，然后调用即可。

floodfill(x, y, RED);

  填充原理是从目标位置开始，把周围不是边界颜色的像素都改成填充颜色，所以边界颜色一定要能够封闭，不然会涂到外面。

  下面就是边界颜色不封闭的结果。

5.2 区域填充

将areaColor颜色的色块填充，x, y为色块内的某个点 。

void floodfillsurface(int x, int y, int areaColor, PIMAGE pimg = NULL);

  如下图，想要将黄色色块涂成紫色， 先要找到色块内部的一个点(x, y), 然后确定色块的颜色值areacolor, 然后调用函数就可以了。
  原理是从目标位置开始，把周围颜色是areaColor的像素都改成填充颜色。这个和windows画图工具里油漆桶的作用是一样的。

填充效果图示例：

---

EGE专栏：EGE专栏