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

传统的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();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

cocos2d-js Shader系列1:cocos2d-js Shader和OpenGL ES2.0

1333
来自专栏阿凯的Excel

物料管理小能手(统计不重复数据)

平时的仓库物料管理,有很多种材料要进进出出。 如果是用Excel做手工台账的,可以看看我的分享! 我有手工台账如下: ? 小本买卖,上面都是便利店的王牌销售...

2804
来自专栏林冠宏的技术文章

C语言版flappy bird黑白框游戏

      在此记录下本人在大一暑假,2014.6~8这段时间复习C语言,随手编的一个模仿之前很火热的小游戏----flappy bird。代码bug基本被我找...

6867
来自专栏aCloudDeveloper

LeetCode: 221_Maximal Square | 二维0-1矩阵中计算包含1的最大正方形的面积 | Medium

题目: Given a 2D binary matrix filled with 0's and 1's, find the largest square co...

2817
来自专栏小樱的经验随笔

详解斯坦纳点及斯坦纳树及模版归纳总结

①什么是斯坦纳点?   假设原来已经给定了个点,库朗等指出需要引进的点数至多为,此种点称为斯坦纳点。过每一斯坦纳点,至多有三条边通过。若为三条边,则它们两两交成...

7136
来自专栏landv

C语言_愤怒的小鸟

2273
来自专栏腾讯IVWEB团队的专栏

WebGL: 从 2D 开始

本文要讨论的 webgl 相对来说会更加底层,它建立在 OpenGL ES 2.0 ( 嵌入式 OpenGL,一个适用于移动设备的 3D 图形标准 )之上,对曾...

1.5K1
来自专栏tkokof 的技术,小趣及杂念

HGE系列之五 管中窥豹(基础类别)

继上次我们编写了那个小程序之后,想必大家对于HGE的认识都有了进一步的提高,那么现在,我想则是时候来一番“管中窥豹”,睹一睹HGE的源码实现了 :)而相应的源...

951
来自专栏PPV课数据科学社区

Excel常用函数大全

我们在使用Excel制作表格整理数据的时候,常常要用到它的函数功能来自动统计处理表格中的数据。这里整理了Excel中使用频率最高的函数的功能、使用...

3729
来自专栏禹都一只猫博客

Python科学计算:在Numpy的边缘试探(入门学习)

2118

扫码关注云+社区