Flash/Flex学习笔记(19)：颜色合成与分解的基本原理
Flash/Flex学习笔记(19)：颜色合成与分解的基本原理
菩提树下的杨过
发布于 2018-01-23 15:30:34
发布于 2018-01-23 15:30:34
传统的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);来还原，但是这种方法的效率是很低的，先要转成字符串，再拆分，然后再转为数字。
上面这张图演示了正确做法的原理，同样将已知分量合成为颜色值时，也可以用类似处理，只不过顺序倒过来而已
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();本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2010-04-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读