早期在论坛的帖子,保存留念。有点感慨那时的学习尽头。
源地址: http://hi.baidu.com/gzane24/blog/item/4756042273fabaa64623e897.html
AcolorPicker组件是我花了3天时间做出来的,遇到了很多问题,但都被我一一解决了,做出来后很高兴,就迫急待的放到了Buleidea上,但是反映并不大,这点让我有点失落,好了进入正题。
photoshop中的取色起主要分为两个部分,一个是主取色板,还有个是色相板。先来看下主取色板,不管它是什么颜色,都有个规律:就是从上到下从白到 黑,从左到右颜色从白到它的色相值的相关值(色相值就是一个颜色在饱和度和明暗度都为100%的时候的RGB值),这里要实现一种颜色就是由它的色相值和 它的明暗度和饱和度来决定的。再分析下色相板,长256像素,颜色从R-G-B-R,可以看作一个圆环分成3段吧。
主取色板的制作,经过上面的简单分析,做个主取色板应该不难,做两个256*256的Shap,用Shap.Graphics 的beginGradientFill 的函数,分别填充两个从白到黑(A),从白到色象值(B)的两个渐变,然后将A旋转90度,将B的混合模式设置为Muti,这样就得到了在某一色象值下的主取色板图。
色象条的制作,仔细看看photo中的色相条,当然也是用Shap.Graphics的
beginGradientFill 的 函数来实现渐变,那么怎么来准确的表示颜色呢, 经过我反复的在Photoishop中测试,颜色从上到下是从正红色(FF0000)开始,RGB中的R值始终为始终为255,G值始终为0,B值以每 Px6的值递增从0-252,但下一个像素的颜色值是 FC00FF,也就是下一个像素的R值一下边成252,G还为0,B值变成255,然后R值以每像素6的值递减,G和B不变,一直减到 0000FF ,R为0(也就是正蓝色 Blue),在过的话R和B不变,G值从0-252。好了有了规律了,这是个圆,分成3部分,一部分称为一个色系,分别是R G B,
每个色系又分为两部分,比如在R色系,分为Rg和Rb,Rg的范围是0-252。
好了,将上面的关键色,作为
beginGradientFill (type:
String , colors: Array , alphas: Array , ratios: Array , matrix:
Matrix = null)中的 colors 中的值,将ratios设置为[0,42,43,85,127,128,170,212,213,255],为什么这样设置,大家自己研究把。
好了,界面都做好了,剩下的工作就是根据 主取色板中的 X Y 位置和色象条的值来,取得一种颜色的值,过程我就不说,我把函数贴下:
public static function rgbTouint(rgbarr:Array):uint//ok uintTorgb { return rgbarr[0]*Math.pow(256,2)+rgbarr[1]*Math.pow(256,1)+rgbarr[2] } public static function computeXTC(c:uint,x:Number,y:Number):uint { var rgbArr:Array = new Array(); rgbArr = uintTorgb(c); //trace(rgbTouint(rgbArr).toString(16)) if(rgbArr[0] == 255)//red system { //trace(rgbArr[1]) rgbArr[0] = -y+255; //R rgbArr[1] = Math.round(-(((rgbArr[1]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[1]-255)/255*x+255);//G rgbArr[2] = Math.round(-(((rgbArr[2]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[2]-255)/255*x+255); trace("X="+x+"Y="+y+" "+ rgbArr[0].toString(16)+" "+ rgbArr[1].toString(16)+" "+ rgbArr[2].toString(16)+" "+ " AAAAAAAAAA") return rgbTouint(rgbArr); } if(rgbArr[1] == 255)//green system { rgbArr[1] = -y+255; rgbArr[0] = Math.round(-(((rgbArr[0]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[0]-255)/255*x+255);//G rgbArr[2] = Math.round(-(((rgbArr[2]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[2]-255)/255*x+255); //trace(rgbTouint(rgbArr).toString(16)+" BBBBBBBBBBBB") return rgbTouint(rgbArr); } if(rgbArr[2] == 255)// blue system { rgbArr[2] = -y+255; rgbArr[0] = Math.round(-(((rgbArr[0]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[0]-255)/255*x+255);//G rgbArr[1] = Math.round(-(((rgbArr[1]-255)/Math.pow(255,2)*x)+1)*y+(rgbArr[1]-255)/255*x+255); //trace(rgbTouint(rgbArr).toString(16)+" CCCCCCCCCC") return rgbTouint(rgbArr); } return rgbTouint(rgbArr); }