前言

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

組件特點(diǎn)

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

實(shí)現(xiàn)效果

• 組件效果

• 使用方法

• 實(shí)際效果

主要內(nèi)容

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

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

詳細(xì)講解

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

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

切換實(shí)現(xiàn)

切換的實(shí)現(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ù)最終顏色和主體顏色計(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:// 在獲取第一層的主題色并計(jì)算出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ù)了一次主題色計(jì)算在m_firstLayerCT.GetPosition(color0)中已經(jīng)計(jì)算過一次，后續(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ù)色帶方向在最接近的兩個顏色之間再通過通道分量計(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)色板左下角為原點(diǎn)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è)計(jì)見源碼。

創(chuàng)建與使用

創(chuàng)建

看過之前幾個組件的同學(xué)應(yīng)該已經(jīng)很熟悉是如何在Unity引擎中插入自己的組件了，這里我們不具體講解了，實(shí)現(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面板顯示，可以通過拓展的方式實(shí)現(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)容就更新到這里，但是顏色拾取器組件還有部分功能尚未實(shí)現(xiàn)，因?yàn)槎际沁壿媶栴}，所以博主會抽空優(yōu)化代碼并把殘缺的部分補(bǔ)足。
• 后續(xù)的博文中會更新一些Unity討論群中經(jīng)常遇到的問題，比如ScrollRect優(yōu)化（加上緩沖池），Iamge組件的拓展，實(shí)現(xiàn)PPT中各種進(jìn)入、推出的效果甚至是翻書效果，還有如何實(shí)現(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ù)更新,支持一下我這個博客新手。如果以上文章對你有幫助，點(diǎn)個贊，讓更多的人看到這篇文章，我們一起學(xué)習(xí)。如果有什么指點(diǎn)的地方歡迎在評論區(qū)留言，秒回復(fù)。

總結(jié)

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

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