unity使用ugui自制调色面板

突然想实现一个调色面板，然后开工...

首先找找有没有什么接口可调，木有找到，找到一些调用win32实现的本地颜色面板的调用，感觉不科学，反正多平台肯定是搞不定的。

既然没找到，还是老老实实的自己写吧，看看Texture2D的相关函数，可以绘制像素，这样就行了，基本搞定，http://docs.unity3d.com/ScriptReference/Texture2D.html

下面来说说，具体步骤：

1.创建一个颜色面板的脚本，初始化一些相关属性，Texture2D，RawImage，颜色数组等

    Texture2D tex2d;
    public RawImage ri;
 
    int TexPixelLength = 256;
    Color[,] arrayColor;
	// Use this for initialization
	void Start () {
        arrayColor = new Color[TexPixelLength, TexPixelLength];
        tex2d = new Texture2D(TexPixelLength, TexPixelLength, TextureFormat.RGB24,true);
        ri.texture = tex2d;
    }

2.开始计算像素的颜色，这里有一点定义需要先自己去观察一下，我看了一下ps和unity自身的调色面板，他们都是地下为黑色，左上为白色，右上为自定义颜色，我这里称他为endColor。知道四个角落的颜色后就开始计算中间像素的颜色，规律嘛，看代码或者自己看ps的调色板也能找出来。因为Texture2D建议用数组绘制像素，我就没有一个个去绘制，先把颜色装数组里吧

      Color[] CalcArrayColor(Color endColor)
    {
        Color value = (endColor - Color.white) / (TexPixelLength - 1);
        for (int i = 0; i < TexPixelLength; i++)
        {
            arrayColor[i, TexPixelLength - 1] = Color.white + value * i;
        }
        for (int i = 0; i < TexPixelLength; i++)
        {
            value = (arrayColor[i, TexPixelLength - 1] - Color.black) / (TexPixelLength - 1);
            for (int j = 0; j < TexPixelLength; j++)
            {
                arrayColor[i, j] = Color.black + value * j;
            }
        }
        List<Color> listColor = new List<Color>();
        for (int i = 0; i < TexPixelLength; i++)
        {
            for (int j = 0; j < TexPixelLength; j++)
            {
                listColor.Add(arrayColor[j, i]);
            }
        }
        
        return listColor.ToArray();
    }

3.获取到颜色数组后，就可以将他绘制tex2d上，然后显示在RawImage上，看一下绘制函数

    public void SetColorPanel(Color endColor)
    {
        Color[] CalcArray = CalcArrayColor(endColor);
        tex2d.SetPixels(CalcArray);
        tex2d.Apply();
    }

4.在获取到相关数据后，然后可以在调用一下SetColorPanel设置为endColor设置一个颜色，比如我这里初始化为红色，感觉跟ps里的一样呢

5.除了红色我们肯定还需要调用其他颜色，于是就需要右边的颜色作为endColor的值，右边的值呢，就是RGB三原色，其他颜色也是他们的混合出来的，然后选择一个endColor左边的颜色面板就会更新新的颜色，大概看一下计算代码，其他显示都类似

    Color[] CalcArrayColor()
    {
        int addValue = (TexPixelHeight - 1) / 3;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            arrayColor[i, 0] = Color.red;
            arrayColor[i, addValue] = Color.green;
            arrayColor[i, addValue+addValue] = Color.blue;
            arrayColor[i, TexPixelHeight - 1] = Color.red;
        }
        Color value = (Color.green - Color.red)/addValue;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = 0; j < addValue; j++)
            {
                arrayColor[i, j] = Color.red + value * j;
            }
        }
        value = (Color.blue - Color.green)/ addValue;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = addValue; j < addValue*2; j++)
            {
                arrayColor[i, j] = Color.green + value * (j-addValue);
            }
        }
 
        value = (Color.red - Color.blue) / ((TexPixelHeight - 1)-addValue-addValue);
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = addValue*2; j < TexPixelHeight - 1; j++)
            {
                arrayColor[i, j] = Color.blue + value * (j- addValue * 2);
            }
        }
 
        List<Color> listColor = new List<Color>();
        for (int i = 0; i < TexPixelHeight; i++)
        {
            for (int j = 0; j < TexPixelWdith; j++)
            {
                listColor.Add(arrayColor[j, i]);
            }
        }
 
        return listColor.ToArray();
    }

6.然后写一个Manager类，来管理一下相关的操作。

哎呀，略懒，写了基本思路就够了，代码都写得很粗糙，也没有去优化操作之类的东西。有兴趣，加一个alpha值，照着unity的调色面板做一个出来，也应该够用了。

工程：https://github.com/coding2233/UnityColor