前言

UnityEngine沒有提供類似自帶顏色拾取器的組件，但是在工業(yè)三維可視化領(lǐng)域可能會用到類似的組件，博主這里結(jié)合Unity UGUI源碼創(chuàng)建一個高仿unity顏色拾取器的組件，可一鍵創(chuàng)建，監(jiān)聽接口使用或者直接獲取組件顏色。上一篇我們已經(jīng)講了部分的難點，這篇我們將剩余的難點解決，文章末尾提供Beta版下載地址(HSV顏色模式暫未開啟)。

組件特點

• 無需任何asset
• 導(dǎo)入代碼即可生成
• 調(diào)用接口方便

實現(xiàn)效果

• 組件效果

• 使用方法

• 實際效果

主要內(nèi)容

上一篇中我們已經(jīng)講解如何去創(chuàng)建顏色拾取器的主體，我們這篇簡單講解一下調(diào)色板模式的切換和創(chuàng)建使用

• 調(diào)色板模式切換
• 創(chuàng)建與使用

詳細(xì)講解

調(diào)色板模式切換

通過點擊按鈕切換當(dāng)前的調(diào)色板模式，調(diào)色板模式一共分為六種Hue,Saturation,Brightness,Red,Green,Blue,默認(rèn)情況下是Hue模式是大家最為熟悉的一種模式

切換實現(xiàn)

切換的實現(xiàn)比較簡單，利用狀態(tài)模式，設(shè)置六種狀態(tài)，在個當(dāng)前狀態(tài)賦值新的狀態(tài)時，更新顏色拾取器相應(yīng)的其他組件即可，詳細(xì)見代碼。

重要將一下切換模式之后，如何讓調(diào)色板上的游標(biāo)跟隨到對應(yīng)顏色的位置

游標(biāo)跟隨

切換顏色模式后，根據(jù)當(dāng)前顏色調(diào)整右側(cè)垂直滑動桿的值，這樣會讓調(diào)色板到達(dá)一個固定狀態(tài)，然后根據(jù)顏色去色板匹配，但是不能挨個像素進(jìn)行匹配效率太慢，Saturation、Brightness狀態(tài)下調(diào)色板由兩層漸變色帶組成，因此需要將顏色拆分兩層考慮,Red、Green、Blue模式下只有一層漸變色帶，因此需要另一種方式。

Saturation、Brightness

• 獲取顏色中rgb三個中較大的兩個值，組成主體顏色，定位x軸坐標(biāo)
• 根據(jù)最終顏色和主體顏色計算出三個通道中另一個通道的分量,定位y軸坐標(biāo)

private Vector2 getPositionByMixedCT( Color color0 ) {var result = Vector2.zero;var size = m_colorPalette.GetComponent<RectTransform>().sizeDelta;switch (PaletteMode){case E_PaletteMode.Hue:break;case E_PaletteMode.Saturation:// 在獲取第一層的主題色并計算出x軸坐標(biāo)var x1 = m_firstLayerCT.GetPosition(color0).x;// 獲取分量var red1 = color0.r;var green1 = color0.g;var blue1 = color0.b;// 分量排序ArrayList array1 = new ArrayList() { red1 , green1 , blue1 };array1.Sort();Color mainColor1;// 根據(jù)排序前兩個最大值定下主體顏色if(array1[0].Equals(red1))mainColor1 = new Color(0 , green1 , blue1 , 1);else if(array1[0].Equals(green1))mainColor1 = new Color(red1,0,blue1,1);elsemainColor1 = new Color(red1,green1,0,1);// 設(shè)置垂直色帶m_verticalFirstCT.SetColors(new Color[] { mainColor1 , Color.white });// 設(shè)置調(diào)色板第二層蒙版層m_secondLayerCT.SetColors(new Color[]{new Color(0, 0, 0, 0) * (1 - (float)array1[0]) + new Color(1, 1, 1, 1) * ((float)array1[0]) ,Color.black});// 獲取y軸坐標(biāo),以上算法重復(fù)了一次主題色計算在m_firstLayerCT.GetPosition(color0)中已經(jīng)計算過一次，后續(xù)優(yōu)化掉這部分算法float y1 = (1- (float)array1[0] ) * size.y - size.y/2.0f;result = new Vector2(x1,y1);break;case E_PaletteMode.Brightness:break;}return result; }public virtual Vector2 GetPosition( Color color0 ) { // .... 獲取主體色// 得到主題色之后，根據(jù)色帶方向在最接近的兩個顏色之間再通過通道分量計算出更精確的位置switch (TapeDirection){case E_DrawDirection.Vertical:// 距離主題色相鄰最近的兩個基礎(chǔ)色的色帶位置var position1 = new Vector2(0 , RectSize.y / 2.0f - pos1 * RectSize.y / ( m_Colors.Count - 1 ));var position2 = new Vector2(0 , RectSize.y / 2.0f - pos2 * RectSize.y / ( m_Colors.Count - 1 ));// 判斷顏色距離那個顏色通道更近int sign1 = 1;if (position1.y > position2.y)sign1 = -1;elsesign1 = 1;// 獲取精確坐標(biāo)位置return position1 + new Vector2(0 , ( RectSize.y / ( m_Colors.Count - 1 ) ) * offset) * sign1;case E_DrawDirection.Horizontal://..同上操作}return Vector2.zero; }

Red、Green、Blue

• 獲取三個通道的分量
• 根據(jù)分量和當(dāng)前模式定位xy坐標(biāo)

public Vector2 GetPosition(Color color0, ColorPicker.E_PaletteMode mode) {// 獲取分量var red = color0.r;var green = color0.g;var blue = color0.b;// 調(diào)色板左下角為原點var origin = new Vector2(-RectSize.x / 2.0f , -RectSize.y / 2.0f);// 根據(jù)不同的模式直接在色板上定位switch (mode){case ColorPicker.E_PaletteMode.Red:return origin + new Vector2(RectSize.x * blue , RectSize.y * green);case ColorPicker.E_PaletteMode.Green:return origin + new Vector2(RectSize.x * blue, RectSize.y * red);case ColorPicker.E_PaletteMode.Blue:return origin + new Vector2(RectSize.x * red , RectSize.y * green);}return Vector2.zero; }

通過以上核心算法講解，應(yīng)該對游標(biāo)定位有了一個大概了解，詳細(xì)設(shè)計見源碼。

創(chuàng)建與使用

創(chuàng)建

看過之前幾個組件的同學(xué)應(yīng)該已經(jīng)很熟悉是如何在Unity引擎中插入自己的組件了，這里我們不具體講解了，實現(xiàn)傳送門

public class SpringGUIMenuOptions {[MenuItem("GameObject/UI/SpringGUI/ColorPicker" , false , 2071)]public static void AddColorPicker( MenuCommand menuCommand ){GameObject colorPicker =SpringGUIDefaultControls.CreateColorPicker(GetStandardResources());PlaceUIElementRoot(colorPicker,menuCommand);colorPicker.transform.localPosition = Vector3.zero;colorPicker.AddComponent<ColorPicker>();} } public static class SpringGUIDefaultControls {/// <summary>/// Create Color Picker/// </summary>/// <param name="resources"></param>/// <returns></returns>public static GameObject CreateColorPicker( Resources resources ){//... //代碼量過長，具體參考源碼} }

在SpringGUI體系下加入以上代碼即可在UI中創(chuàng)建ColorPicker組件，接下來我們看看應(yīng)該如何使用監(jiān)聽

使用

使用原理

public class ColorPicker : UIBehaviour {[Serializable]public class ColorPickerEvent : UnityEvent<Color> { }[SerializeField]private ColorPickerEvent m_evnet = new ColorPickerEvent();public ColorPickerEvent onPicker{get { return m_evnet; }set { m_evnet = value; }} }

• 提供繼承至UntiyEvent的事件類型并提供一個Color參數(shù)
• 監(jiān)聽該事件即可獲取到顏色拾取器當(dāng)前的顏色
• 該事件接口也會在在Inspector面板顯示，可以通過拓展的方式實現(xiàn)監(jiān)聽

具體使用

• 代碼監(jiān)聽

public class Program : MonoBehaviour {public Image image = null;public ColorPicker Picker = null;private void Awake(){Picker = GameObject.Find("Canvas/ColorPicker").GetComponent<ColorPicker>();Picker.onPicker.AddListener(color =>{// 在顏色拾取變化時即可個Iamge組件賦值顏色image.color = color;});} }

• Inspector面板監(jiān)聽

public class Program : MonoBehaviour {public Image image = null;public void SetColor( Color color ){image.color = color;} }

后續(xù)拓展

• 顏色拾取器的博客內(nèi)容就更新到這里，但是顏色拾取器組件還有部分功能尚未實現(xiàn)，因為都是邏輯問題，所以博主會抽空優(yōu)化代碼并把殘缺的部分補(bǔ)足。
• 后續(xù)的博文中會更新一些Unity討論群中經(jīng)常遇到的問題，比如ScrollRect優(yōu)化（加上緩沖池），Iamge組件的拓展，實現(xiàn)PPT中各種進(jìn)入、推出的效果甚至是翻書效果，還有如何實現(xiàn)全景照片，還有之前寫好的條形圖和折線圖等，如果你覺得以上組件對你有幫助，關(guān)注我的博客，我會持續(xù)更新。

Unity自定義UI組件系列

• Unity自定義UI組件(八) 顏色拾取器(上)
• Unity自定義UI組件(七)漸變工具、漸變色圖片、漸變遮罩
• Unity自定義UI組件(六)日歷、日期拾取器
• Unity自定義組件之(五) 目錄樹 UITree
• Unity自定義UI組件(四)雙擊按鈕、長按按鈕
• Unity自定義UI組件(三)餅圖篇
• Unity自定義UI組件(二)函數(shù)圖篇(下)
• Unity自定義UI組件(一)函數(shù)圖篇(上)

Unity框架解讀系列

• [Unity]PureMVC框架解讀(下)
• [Unity]PureMVC框架解讀(上)

分享地址

• Github ：https://github.com/ll4080333/UnityCodes
• CSDN ： http://blog.csdn.net/qq_29579137
  如果你想了解UGUI的更多拓展組件，歡迎關(guān)注我的博客，我會持續(xù)更新,支持一下我這個博客新手。如果以上文章對你有幫助，點個贊，讓更多的人看到這篇文章，我們一起學(xué)習(xí)。如果有什么指點的地方歡迎在評論區(qū)留言，秒回復(fù)。

總結(jié)

以上是生活随笔為你收集整理的Unity自定义UI组件(九) 颜色拾取器(下)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。