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

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

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

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

view source

print?

1

var

r:

uint

=

parseInt

(

"FF"

,

16

);

2

trace

(r);

来还原，但是这种方法的效率是很低的，先要转成字符串，再拆分，然后再转为数字。



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

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

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

B分量：不做任何处理

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

view source

print?

01

var

color:

uint

;

02

03

function

drawColorRect(r:

uint

,g:

uint

,b:

uint

) {

04

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

05

color=r<<

16

|g<<

8

|b; 

06

graphics.clear();

07

graphics.beginFill(color);

08

graphics.drawRect(

49

,

43

,

267

,

150

);

09

graphics.endFill();

10

11

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

12

13

//获取颜色分量

14

var

r:

uint

=color>>

16

;

15

var

g:

uint

=color>>

8

&

0xff

;

16

var

b:

uint

=color &

0xff

;

17

lbl1.text =

"16进制分量还原结果，红："

+ r.toString(

"16"

) +

"，绿："

+ g.toString(

"16"

) +

"，蓝："

+ b.toString(

"16"

);

18

19

}

20

21

txtR.addEventListener(Event.CHANGE,ChangeHandler);

22

txtG.addEventListener(Event.CHANGE,ChangeHandler);

23

txtB.addEventListener(Event.CHANGE,ChangeHandler);

24

25

function

ChangeHandler(e:Event):

void

{

26

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

27

}

28

29

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

30

31

stop();