首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Flash >

Flash/Flex学习札记(16):颜色合成与分解的基本原理

2012-10-07 
Flash/Flex学习笔记(16):颜色合成与分解的基本原理传统的RGB颜色体系中,每一个分量值的范围都是0到255,如

Flash/Flex学习笔记(16):颜色合成与分解的基本原理

传统的RGB颜色体系中,每一个分量值的范围都是0到255,如果转换为2进制的话最多需要8位(比如:十进制的255变成二进制则为11111111),三个分量加起来,最多需要24位长度的uint来存储.

而通常我们在html中喜欢用16进制比如"#FF0000"来表示红色,即R:255,G:0,B:0,如何高效的从一个表示颜色的unit数字中把这RGB分量提取出来?

当然:最容易想到的是利用字符串拆分,拆成二个二个一组,然后用:

?
var r:uint = parseInt("FF",16);

?
trace(r);

来还原,但是这种方法的效率是很低的,先要转成字符串,再拆分,然后再转为数字。
Flash/Flex学习札记(16):颜色合成与分解的基本原理

上面这张图演示了正确做法的原理,同样将已知分量合成为颜色值时,也可以用类似处理,只不过顺序倒过来而已

R分量:先将其左移16位,推到左侧顶端,得到一个包含R分量,其它位置均为0的值

G分量:先将其左移8位,推到中间,得到一个包含G分量,其它位置均为0的值

B分量:不做任何处理

然后将这三个新值,位对位做或运算,只要有值(即1)的部分,就被会保留下来,从而得到新的颜色值。

?
var color:uint;


function drawColorRect(r:uint,g:uint,b:uint) {


//直接用位操作合成颜色

?
color=r<<16|g<<8|b;?

?
graphics.clear();


graphics.beginFill(color);

graphics.drawRect(49,43,267,150);

?
graphics.endFill();

?
//lbl1.text = "#" + color.toString(16); 返回16进制的值,不过该值会忽略前导的0

?
//获取颜色分量

?
var r:uint = color>>16;

?
var g:uint = color>>8 & 0xff;

?
var b:uint = color & 0xff;

?
lbl1.text = "16进制分量还原结果,红:" + r.toString("16") + ",绿:" + g.toString("16") + ",蓝:" + b.toString("16");


}


txtR.addEventListener(Event.CHANGE,ChangeHandler);

?
txtG.addEventListener(Event.CHANGE,ChangeHandler);

?
txtB.addEventListener(Event.CHANGE,ChangeHandler);


function ChangeHandler(e:Event):void {

?
drawColorRect(txtR.value,txtG.value,txtB.value);

?
}


drawColorRect(txtR.value,txtG.value,txtB.value);

?
stop();

热点排行