渐变色原理

[引用][http://www.islandcn.com/post/311.html]

 

在图象图形的编程中, 经常会见到渐变色以及各种图片的叠加等效果. 这篇文章就是要对这些效果的原理加以分析, 并在Elastos© 操作系统 Mobile Edition SDK上和Windows 200 Professional上使用Visual C++ 6.0 编程实现.
一. RGB三维模型与渐变色的原理及实现
 1. RGB三维模型
作为计算机图形学中重要的原色混合系统, RGB(红绿蓝)加色系统广泛应用于发光体, 如彩色CRT显示或彩色灯光. 这三种单色是得以匹配或生成可见光谱中几乎所有颜色的最小数量的原色.
为了适应不同的颜色深度, 使用0-1来表示R, G, B颜色深浅. 使用三维坐标分别表示RGB. 如下图1所示. 这样原点RGB(0, 0, 0)就表示黑色, 而原点对应的顶点RGB(1, 1, 1)就表示白色. 使用三维表示的好处就在于直观, 以及在颜色变化过程中容易得到颜色变化的规律.

 

实现渐变色与图像叠加效果

 

(图1)
在图1所表示的空间中(点表示为 (R, G, B), 0≤R≤1, 0≤G≤1,0≤B≤1). 现在假设有某颜色(比如图1中的点Q), 其值为(r, g, b). 那么从黑色到该颜色的点(在图1中就对应从点(0,0,0)到点Q(r, g, b)的线段)从视觉上是越来越浅. 设这些点的坐标为(x, y, z)(0≤x≤r, 0≤y≤≤g, 0≤z≤b), 那么在我们的RGB三维坐标空间中就有方程:

 

公式1

 

(公式1)
(注意: 这里处理的点都是三维模型所表示的立体内的点, 其中边界情况请读者自行考虑)
从该点到白色的点(在图1中就对应从点Q(r, g, b)到点(1, 1, 1)的线段)的颜色继续变浅. 设这些点的坐标为(x, y, z)(r≤x≤1, g≤y≤1, b≤z≤1), 那么这些点满足方程:

 

公式2

 

(公式2)
(注意: 同上, 这里处理的点都是三维模型所表示的立体内的点, 其中边界情况请读者自行考虑)

__________________________________________________________________________________

 

 

根据以上原理，要实现渐变色，只需要按照三维直接坐标变换过程着色即可。三维直线方程为：

 

(x-x1)/(x2-x1)=(y-y1)/(y2-y1)=(z-z1)/(z2-z1) 

其中，起始点为（x1,y1,z1），终止点为（x2,y2,z2），也就是对应于我们的起始颜色和结束颜色的RGB值。

 

取某一边为渐近过程，对应的算出另两条边的值，就可以组合出对应的某点的颜色。

 

例如，有起始颜色：（255，0，0）和结束颜色（0，255，0），按渐变过程，每个颜色画两条竖线得到的图如下：

 

启始颜色：（255，0，255）和结束颜色（0，255，255）得到的渐变图为：

<!-- 导入 在此 参考资料--><!-- end 参考资料-->