[教程]仿photoshop拾色器调整颜色

仿photoshop拾色器调整颜色

主要功能：对图片调整色调和混合模式。调色界面仿photoshop。

关于加载图片和控件在这里不进行说明了，对使用过FLEX和AS3的人来说都是基础了。

这里只说明下如何调整色调以及利用这种友好的界面方式进行调色：选择颜色以及明暗度来进行调色

混合模式

直接利用flashAPI的显示对象的blendMode属性即可调整混合模式，其实就是预先制定好的颜色叠加的一种计算公式，例如变为加法混合模式：

sp.blendMode = BlendMode.ADD;

关于混合模式的相关内容在这里只是简单一提，具体的可以自行查询相关资料，这个是比较多的。

颜色叠加
颜色叠加一般用到的是transform的colorTransform属性，对原有的颜色叠加一种颜色，例如我要叠加的颜色为transR,transG,transB（这里代表红色、绿色、蓝色叠加值，取值都是-255~255）：

sp.transform.colorTransform = new ColorTransform(1,1,1,1,transR,transG,transB,0);

也就是说上图中我们必须通过“拾色器”来确定transR,transG,transB的值，在这里我就直接截了PS的拾色器界面的图并稍加PS了一下得到的这个图片来当做界面使用，所以这里的颜色图片也仅仅是一张图片，我们取色的时候可以通过取得这个图片的某个像素点的颜色值（BitmapData的方法）来获得颜色RGB，到此为止实际上我们已经可以调色了，但取值范围RGB都是0~255，你无法调暗色，所以有一个明暗度的调整，来将颜色转为-255~255。我们这里的明暗度由于高度刚好是256像素，为了简化计算就取值为0-255，这样根据当前指向的高度就直接获得了当前明暗度的数值。那么如何通过已知的明暗度（0-255，0表示最亮，255表示最暗）以及当前选中的R（0-255）、G（0-255）、B（0-255）来计算获得一个正确的最终transR(-255~255)、transG(-255~255)、transB(-255~255)呢？

思路：

   ----- 一般我们会利用一些具体的数值来进行推导公式，比如明暗度为0-最亮，我们发现其最终值就是当前的R、G、B，即transR=R，transG=G，transB=B

   ----- 而明暗度为255-最暗，我们发现其最终值就是transR=-255，transG=-255，transB=-255，即黑色

   ----- 那么如何计算这之间的值呢？很容易就会发现公式：

     

transR = R - 明暗度*2;
transG = G - 明暗度*2;
transB = B - 明暗度*2;

并且最终计算值如果小于-255的话就等于-255。

让我们验证一下，比如明暗度为50%左右，取值127，而当前颜色是0xFF0000即红色，R=255 G=0 B=0，根据50%明暗度计算出的数值为

transR = 255 - 127*2;
transG = 0 - 127*2;
transB = 0 -  127*2;

最终得到的结果就是（1，-254，-254），实际效果为暗红色。

至此，我们就可以任意通过取色和明暗度的方式来调整颜色了，一般用于对特效的调色，以便节约文件资源。

相关工程源文件（flashbuilder工程）：链接：http://pan.baidu.com/s/1i5AlxeX 密码：y1m8