//伪渐变原理的关键问题是:
起始颜色(比如:#efefef)渐变到结束颜色(比如:#344567),那么中间的颜色的值(rgb值,html值都可以)如何计算?
我想弄懂了这个问题,渐变问题也就迎刃而解拉。经过几次的观察尝试摸索,总结了下面的这个伪渐变原理:
伪原理:
颜色一般由三色部分组成(暂且不讨论alpha透明度),red,green,blue(rgb色彩原理)
Color c=Color.FromArgb(255,0,134)
上面的值中255就是红色值,0就是绿色值,134就是蓝色值,改变他们,就改变了颜色.
但是,渐变是如何规律的改变这三个值的?(关键!),具体点,
Color c1=Color.FromArgb(255,255,255);
Color c2=Color.FromArgb(0,0,0);
由c1渐变到c2的中间颜色是多少呢?
提取原理分析:
假如渐变长度为256个像素,第一个像素点颜色值为(0,0,0),最后一个像素点颜色值为(255,255,255),经观察发现,中间渐变像素点很有规律:从(1,1,1)->(2,2,2)->(3,3,3)...(254,254,254)->(255,255,255)呈现各分量分别递变(递增,递减)!换另外两种颜色,也是符合上面的分析,只是各分量的递变间隔不一定相同(有的慢有的快)。
结果:
颜色渐变就是源rgb三色对应朝着目标rgb三色按各自一定间隔递变!
现在,我们已经弄清楚了伪渐变原理,就用c#编程试试效果吧(截图有点闪烁,效果不好,但是真正的图片效果好)!

附件:
您所在的用户组无法下载或查看附件 生成的真正的图片效果:

附件:
您所在的用户组无法下载或查看附件后台核心代码(预览):

Code
private void button1_Click(object sender, EventArgs e)
{
//预览图片(按钮)
//ConvertHtmlToRgb()为自定义的辅助函数
//起始颜色html转换为rgb
int[] starthtmlcolor = ConvertHtmlToRgb(this.textBox1.Text.ToLower());
int[] endhtmlcolor = ConvertHtmlToRgb(this.textBox2.Text.ToLower());
Color startColor = Color.FromArgb(starthtmlcolor[0],starthtmlcolor[1],starthtmlcolor[2]);
Color endColor = Color.FromArgb(endhtmlcolor[0],endhtmlcolor[1],endhtmlcolor[2]);
//int BgWidth = 100;
//int BgHeight = 100;
//计算三色递变的间隔(正数和负数都能正常处理)
//用float保证精度和准确度,否则int型偏差太大
float RedColorStep = (float)(startColor.R - endColor.R) / 100;
float GreenColorStep = (float)(startColor.G - endColor.G) / 100;
float BlueColorStep = (float)(startColor.B - endColor.B) / 100;
//获取起始颜色的三色
float redColor = startColor.R;
float greenColor = startColor.G;
float blueColor = startColor.B;
//下面创建bitmap开始画图
Bitmap bm = new Bitmap(100, 100);
for (int i = 0; i < 100; i++)
{
///防止超出0-255的范围,只好做一个近似处理
if (redColor > 255){redColor = 255;}
if (redColor < 0){redColor = 0;}
if (greenColor > 255) { greenColor = 255; }
if (greenColor < 0) { greenColor = 0; }
if (blueColor > 255) { blueColor = 255; }
if (blueColor < 0) { blueColor = 0; }
for (int j = 0; j < 100; j++)
{
//通过设置每个像素点的值画图
bm.SetPixel(i, j, Color.FromArgb((int)redColor,(int)greenColor,(int)blueColor));
}
//不管上面是正数还是负数,在这里一减,通通渐变
redColor -= RedColorStep;
greenColor -= GreenColorStep;
blueColor -= BlueColorStep;
}
//在窗体上显示,预览
Graphics g = this.CreateGraphics();
g.DrawImage(bm, 10, 150);
//如果想保存的话,加上下面一句(用对话框的话更好,就不贴出代码了)
//bm.Save("c:/a.gif");
}
辅助函数ConvertHtmlToRgb():

Code
public int[] ConvertHtmlToRgb(string htmlcolor)
{
//转换十六进制的html颜色代码为三位rgb的int值
//SixteenCharMapToTen()为自定义的辅助函数
int[] redcolor = new int[3];
redcolor[0] = SixteenCharMapToTen(htmlcolor[1]) * 16 + SixteenCharMapToTen(htmlcolor[2]);
redcolor[1] = SixteenCharMapToTen(htmlcolor[3]) * 16 + SixteenCharMapToTen(htmlcolor[4]);
redcolor[2] = SixteenCharMapToTen(htmlcolor[5]) * 16 + SixteenCharMapToTen(htmlcolor[6]);
return redcolor;
}
辅助函数SixteenCharMapToTen():

Code
public Int32 SixteenCharMapToTen(char sixteenchar)
{
//转换十六进制的字符为十进制的数字
Hashtable ht = new Hashtable();
string sc = "0123456789abcdef";
for (int i = 0; i < 10; i++)
{
ht.Add(sc, i);
}
ht.Add('a', 10);
ht.Add('b', 11);
ht.Add('c', 12);
ht.Add('d', 13);
ht.Add('e', 14);
ht.Add('f', 15);
return (Int32)ht[sixteenchar];
}
注意一点:
1.可能有的朋友对ConvertHtmlToRgb()不大理解,其实就是#aabbcc=>{170,187,204}的过程,aa表示红色R的值,转化为十进制的170,其他两色类似.
2.用像素绘制图片,效率非常之低,我会在后面改进.
今天我们算是开了个头,伪渐变原理应该讲清楚拉,关于渐变的其他形式以及alpha透明度的探索,丰富多采,我会
在后续篇章中和大家一起分享,欢迎排砖!
(文/qianxudetianxia 出处/博客园)
您可能对 [C#] 的这些文章也感兴趣: