理論任何環(huán)境下可用,包括手機(jī)運(yùn)行時(shí)...

效果如下:

ColorPalette.gif

代碼如下(只寫(xiě)了一點(diǎn)簡(jiǎn)單的注釋,邏輯也不是很復(fù)雜,有空再補(bǔ)吧):

using System;
using UnityEngine;
using UnityEngine.UI;

public class ColorPalette : MonoBehaviour
{
    //C_DragHandler為自己封裝的Event事件,可以自己通過(guò)IBeginDragHandler, IDragHandler, IEndDragHandler實(shí)現(xiàn)是一樣的,這里用自己的庫(kù)就懶得改了
    C_DragHandler drag_SaturationPanel;
    //C_PointerDownAndUpHandler同理,實(shí)際上也就是繼承IPointerDownHandler, IPointerUpHandler即可
    C_PointerDownAndUpHandler dau_SaturationPanel;
    RectTransform mark_SaturationPos;

    C_DragHandler drag_HuePanell;
    C_PointerDownAndUpHandler dau_HuePanell;
    RectTransform mark_HuePos;

    C_DragHandler drag_TransparentPanel;
    C_PointerDownAndUpHandler dau_TransparentPanel;
    RectTransform mark_TransparentPos;

    Image SaturationPanel;
    Image HuePanel;
    Image TransparentPanel;
    Image CurrentColorPanel;

    RectTransform rect_SaturationPanel;
    RectTransform rect_HuePanel;
    RectTransform rect_TransparentPanel;

    Sprite sprite_Saturation;
    Sprite sprite_Hue;
    Sprite sprite_TransparentPanel;

    public Button Btn_Apply;

    private Color color_Hue = Color.red;

    Color current_color = Color.white;

    public Action<Color> OnColorPaletteSelectedColor;

    public void Awake()
    {
        Btn_Apply = this.transform.Find("Container/Btn_Apply").GetComponent<Button>();

        SaturationPanel = this.transform.Find("Container/SaturationPanel").GetComponent<Image>();
        HuePanel = this.transform.Find("Container/HuePanel").GetComponent<Image>();
        TransparentPanel = this.transform.Find("Container/TransparentPanel").GetComponent<Image>();
        CurrentColorPanel = this.transform.Find("Container/CurrentColorPanel").GetComponent<Image>();

        drag_SaturationPanel = SaturationPanel.GetComponent<C_DragHandler>();
        drag_HuePanell = HuePanel.GetComponent<C_DragHandler>();
        drag_TransparentPanel = TransparentPanel.GetComponent<C_DragHandler>();

        dau_SaturationPanel = SaturationPanel.GetComponent<C_PointerDownAndUpHandler>();
        dau_HuePanell = HuePanel.GetComponent<C_PointerDownAndUpHandler>();
        dau_TransparentPanel = TransparentPanel.GetComponent<C_PointerDownAndUpHandler>();

        rect_SaturationPanel = SaturationPanel.GetComponent<RectTransform>();
        rect_HuePanel = HuePanel.GetComponent<RectTransform>();
        rect_TransparentPanel = TransparentPanel.GetComponent<RectTransform>();

        mark_SaturationPos = rect_SaturationPanel.GetChild(0).GetComponent<RectTransform>();
        mark_HuePos = rect_HuePanel.GetChild(0).GetComponent<RectTransform>();
        mark_TransparentPos = rect_TransparentPanel.GetChild(0).GetComponent<RectTransform>();

        BindingEvent();

        DrawStaurationPanel();
        DrawHuePanel();
        DrawTransparentPanel();
    }

    /// <summary>
    /// 綁定所有的拖拽,點(diǎn)擊事件之類(lèi)的
    /// </summary>
    void BindingEvent()
    {
        //點(diǎn)擊確定按鈕后就將打開(kāi)面板前綁定的事件注銷(xiāo)
        Btn_Apply.onClick.AddListener(() =>
        {
            this.gameObject.SetActive(false);
            if (OnColorPaletteSelectedColor != null)
            {
                Delegate[] delegates = OnColorPaletteSelectedColor.GetInvocationList();
                for (int i = 0; i < delegates.Length; i++)
                {
                    OnColorPaletteSelectedColor -= delegates[i] as Action<Color>;
                }
            }
        });

        //以下全為3個(gè)面板的事件綁定,
        dau_SaturationPanel.Add_PointerDownEvent((data) =>
        {
            mark_SaturationPos.gameObject.SetActive(true);
            mark_SaturationPos.transform.position = data.position;
        });

        drag_SaturationPanel.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_SaturationPanel, data.position))
            {
                mark_SaturationPos.transform.position = data.position;
            }
        });

        dau_SaturationPanel.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_SaturationPanel.rect.width / 2 + mark_SaturationPos.anchoredPosition.x);
            int y = (int)(rect_SaturationPanel.rect.height / 2 + mark_SaturationPos.anchoredPosition.y);
            Color pixelColor = sprite_Saturation.texture.GetPixel(x, y);
            current_color = new Color(pixelColor.r, pixelColor.g, pixelColor.b, current_color.a);
            OnSelectColorChanged();
        });


        dau_HuePanell.Add_PointerDownEvent((data) =>
        {
            mark_HuePos.gameObject.SetActive(true);
            mark_HuePos.transform.position = data.position;
        });

        drag_HuePanell.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_HuePanel, data.position))
            {
                mark_HuePos.transform.position = data.position;
            }
        });

        dau_HuePanell.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_HuePanel.rect.width / 2 + mark_HuePos.anchoredPosition.x);
            int y = (int)(rect_HuePanel.rect.height / 2 + mark_HuePos.anchoredPosition.y);
            color_Hue = sprite_Hue.texture.GetPixel(x, y);

            DrawStaurationPanel();

            int x2 = (int)(rect_SaturationPanel.rect.width / 2 + mark_SaturationPos.anchoredPosition.x);
            int y2 = (int)(rect_SaturationPanel.rect.height / 2 + mark_SaturationPos.anchoredPosition.y);
            Color pixelColor = sprite_Saturation.texture.GetPixel(x2, y2);
            current_color = new Color(pixelColor.r, pixelColor.g, pixelColor.b, current_color.a);
            OnSelectColorChanged();
        });


        dau_TransparentPanel.Add_PointerDownEvent((data) =>
        {
            mark_TransparentPos.gameObject.SetActive(true);
            mark_TransparentPos.transform.position = data.position;
        });

        drag_TransparentPanel.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_TransparentPanel, data.position))
            {
                mark_TransparentPos.transform.position = data.position;
            }
        });

        dau_TransparentPanel.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_TransparentPanel.rect.width / 2 + mark_TransparentPos.anchoredPosition.x);
            int y = (int)(rect_TransparentPanel.rect.height / 2 + mark_TransparentPos.anchoredPosition.y);
            Color pixelColor = sprite_TransparentPanel.texture.GetPixel(x, y);
            current_color = new Color(current_color.r, current_color.g, current_color.b, pixelColor.a);
            OnSelectColorChanged();
        });
    }

    /// <summary>
    /// 每當(dāng)面板顏色變化會(huì)調(diào)用這個(gè)方法,外部綁定這個(gè)OnColorPaletteSelectedColor委托
    /// </summary>
    void OnSelectColorChanged()
    {
        CurrentColorPanel.color = current_color;
        OnColorPaletteSelectedColor?.Invoke(current_color);
    }

    //繪制透明面板(最下面那個(gè))
    private void DrawTransparentPanel()
    {
        sprite_TransparentPanel = Sprite.Create(new Texture2D((int)rect_TransparentPanel.rect.width, (int)rect_TransparentPanel.rect.height), new Rect(0, 0, rect_TransparentPanel.rect.width, rect_TransparentPanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_TransparentPanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_TransparentPanel.rect.width; i++)
            {
                float uv_x = i / rect_TransparentPanel.rect.width;

                Color pixelColor = Color.white;
                pixelColor.a = uv_x;
                sprite_TransparentPanel.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_TransparentPanel.texture.Apply();
        TransparentPanel.sprite = sprite_TransparentPanel;
    }

    //繪制色調(diào)面板(中間那個(gè))
    private void DrawHuePanel()
    {
        sprite_Hue = Sprite.Create(new Texture2D((int)rect_HuePanel.rect.width, (int)rect_HuePanel.rect.height), new Rect(0, 0, rect_HuePanel.rect.width, rect_HuePanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_HuePanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_HuePanel.rect.width; i++)
            {
                float uv_x = i / rect_HuePanel.rect.width;

                Color pixelColor = GetHueColor(uv_x);
                sprite_Hue.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_Hue.texture.Apply();
        HuePanel.sprite = sprite_Hue;
    }

    //繪制飽和度面板(最大的那個(gè)面板)
    private void DrawStaurationPanel()
    {
        sprite_Saturation = Sprite.Create(new Texture2D((int)rect_SaturationPanel.rect.width, (int)rect_SaturationPanel.rect.height), new Rect(0, 0, rect_SaturationPanel.rect.width, rect_SaturationPanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_SaturationPanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_SaturationPanel.rect.width; i++)
            {
                float uv_x = i / rect_SaturationPanel.rect.width;
                float uv_y = j / rect_SaturationPanel.rect.height;

                Color pixelColor = GetSaturationPixelColor(color_Hue, uv_x, uv_y);
                sprite_Saturation.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_Saturation.texture.Apply();
        SaturationPanel.sprite = sprite_Saturation;
    }

    /// <summary>
    /// 計(jì)算面板uv對(duì)應(yīng)的顏色
    /// </summary>
    /// <param name="hue_color">當(dāng)前選擇的hue顏色</param>
    /// <param name="x">這里的x,已經(jīng)除以了面板的寬度,所以范圍是0-1,相當(dāng)于uv_x</param>
    /// <param name="y">這里的y,已經(jīng)除以了面板的高度,所以范圍是0-1,相當(dāng)于uv_y</param>
    /// <returns></returns>
    private static Color GetSaturationPixelColor(Color color_Hue, float x, float y)
    {
        Color pixelColor = Color.white;
        pixelColor.r = 1 + (color_Hue.r - 1) * x;
        pixelColor.g = 1 + (color_Hue.g - 1) * x;
        pixelColor.b = 1 + (color_Hue.b - 1) * x;
        pixelColor *= y;
        pixelColor.a = 1;
        return pixelColor;
    }

    /// <summary>
    /// 將顏色分成6塊,挨個(gè)過(guò)渡融合即可
    /// 原本只取了RGB三個(gè)塊，然后漸變疊加，這樣導(dǎo)致最后過(guò)渡色取不到，比如黃色取不到，所以要單獨(dú)加入
    /// </summary>
    public readonly static Color[] colors = new Color[] { Color.red, Color.red + Color.green, Color.green, Color.green + Color.blue, Color.blue, Color.blue + Color.red, Color.red };
    private static Color GetHueColor(float uv_x)
    {
        Color pixelColor = Color.white;
        float uv_x_mut_6 = uv_x * 6;
        int index_floor = Mathf.FloorToInt(uv_x_mut_6);
        int index_ceil = Mathf.CeilToInt(uv_x_mut_6);
        var index_in_block = uv_x_mut_6 - index_floor;
        pixelColor = colors[index_floor] + (colors[index_ceil] - colors[index_floor]) * index_in_block;
        //pixelColor = (colors[index_floor] * (1 - index_in_block)) * (colors[index_ceil] * index_in_block);
        return pixelColor;
    }
}