仿photoshop中的取色器，制作思路

早期在论坛的帖子，保存留念。有点感慨那时的学习尽头。

 

 

 

 

源地址： 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);
}