当前位置:网站首页>Unity 颜色板|调色板|无级变色功能
Unity 颜色板|调色板|无级变色功能
2022-07-06 16:05:00 【Fuuyg】
效果
Unity 通过UGUI实现无级变色的调色板功能,非常的简单好用。
项目git地址
https://github.com/zrzhang76/UnityColorBoard
代码(写这个完全是因为CSDN嫌我字数少,建议直接看项目)
颜色板部分
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
namespace CSharp.UI.ColorBoard
{
public class ColorBoard : MonoBehaviour, IPointerClickHandler, IDragHandler
{
//显示颜色的Texture
Texture2D tex2d;
//RawImage组件
RawImage ri;
//像素宽度高度256(默认值)
int TexPixelLength = 256;
int TexPixelHeight = 256;
//公共组件
public Slider sliderCRGB;
public ColorHue colorHue;
//颜色数组
UnityEngine.Color[,] arrayColor;
//自身的Transform
RectTransform rt;
//颜色聚焦点的圆圈
public RectTransform circleRect;
public delegate void ColorChangeDelegate(Color color);
public event ColorChangeDelegate OnColorChanged;
private void Awake()
{
ri = GetComponent<RawImage>();
rt = GetComponent<RectTransform>();
circleRect = transform.Find("img_cursor").GetComponent<RectTransform>();
TexPixelLength = (int)rt.sizeDelta.x;
TexPixelHeight = (int)rt.sizeDelta.y;
//初始化颜色数组
arrayColor = new UnityEngine.Color[TexPixelLength, TexPixelHeight];
//创建一个固定长宽的Texture
tex2d = new Texture2D(TexPixelLength, TexPixelHeight, TextureFormat.RGB24, true);
//组件赋值图片
ri.texture = tex2d;
ri.texture.wrapMode = TextureWrapMode.Clamp;
//初始化设置板子的颜色为红色
SetColorPanel(UnityEngine.Color.red);
sliderCRGB.onValueChanged.AddListener(OnCRGBValueChanged);
}
//颜色放生变化的监听
void OnCRGBValueChanged(float value)
{
UnityEngine.Color endColor=colorHue.GetColorBySliderValue(value);
SetColorPanel(endColor);
var color = GetColorByPosition(circleRect.anchoredPosition);
OnColorChanged?.Invoke(color);
}
//设置板子的颜色
public void SetColorPanel(UnityEngine.Color endColor)
{
UnityEngine.Color[] CalcArray = CalcArrayColor(endColor);
//给颜色板子填入颜色,并且应用
tex2d.SetPixels(CalcArray);
tex2d.Apply();
}
//通过一个最终颜色值,计算板子上所有像素点应该的颜色,并返回一个数组
UnityEngine.Color[] CalcArrayColor(UnityEngine.Color endColor)
{
//计算最终值和白色的差值在水平方向的平均值,用于计算水平每个像素点的色值
UnityEngine.Color value = (endColor - UnityEngine.Color.white) / (TexPixelLength - 1);
for (int i = 0; i < TexPixelLength; i++)
{
arrayColor[i, TexPixelHeight - 1] = UnityEngine.Color.white + value * i;
}
// 同理,垂直方向
for (int i = 0; i < TexPixelLength; i++)
{
value = (arrayColor[i, TexPixelHeight - 1] - UnityEngine.Color.black) / (TexPixelHeight - 1);
for (int j = 0; j < TexPixelHeight; j++)
{
arrayColor[i, j] = UnityEngine.Color.black + value * j;
}
}
//返回一个数组,保存了所有颜色色值
List<UnityEngine.Color> listColor = new List<UnityEngine.Color>();
for (int i = 0; i < TexPixelHeight; i++)
{
for (int j = 0; j < TexPixelLength; j++)
{
listColor.Add(arrayColor[j, i]);
}
}
return listColor.ToArray();
}
/// <summary>
/// 获取颜色by坐标,坐标是Texture上面的二维坐标
/// </summary>
/// <param name="pos"></param>
/// <returns></returns>
public UnityEngine.Color GetColorByPosition(Vector2 pos)
{
Texture2D tempTex2d = (Texture2D)ri.texture;
UnityEngine.Color getColor = tempTex2d.GetPixel((int)pos.x, (int)pos.y);
return getColor;
}
public Vector2 GetClampPosition(Vector2 touchPos)
{
Vector2 vector2 = new Vector2(touchPos.x, touchPos.y);
vector2.x = Mathf.Clamp(vector2.x, 0.001f, rt.sizeDelta.x);
vector2.y = Mathf.Clamp(vector2.y, 0.001f, rt.sizeDelta.y);
return vector2;
}
//点击事件
public void OnPointerClick(PointerEventData eventData)
{
Vector3 wordPos;
//将UGUI的坐标转为世界坐标
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rt, eventData.position, eventData.pressEventCamera, out wordPos))
circleRect.position = wordPos;
circleRect.anchoredPosition = GetClampPosition(circleRect.anchoredPosition);
var color = GetColorByPosition(circleRect.anchoredPosition);
OnColorChanged?.Invoke(color);
}
//拖拽事件
public void OnDrag(PointerEventData eventData)
{
Vector3 wordPos;
//将UGUI的坐标转为世界坐标
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rt, eventData.position, eventData.pressEventCamera, out wordPos))
circleRect.position = wordPos;
circleRect.anchoredPosition = GetClampPosition(circleRect.anchoredPosition);
var color = GetColorByPosition(circleRect.anchoredPosition);
OnColorChanged?.Invoke(color);
}
}
}
色相条部分
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ColorHue : MonoBehaviour
{
//绘制颜色的Texture
Texture2D tex2d;
//图片展示组件
RawImage ri;
//长宽
int TexPixelWdith = 952;
int TexPixelHeight = 16;
//颜色的数组
UnityEngine.Color[,] arrayColor;
private void Awake()
{
ri = gameObject.GetComponent<RawImage>();
//初始化颜色和Texture
arrayColor = new UnityEngine.Color[TexPixelWdith, TexPixelHeight];
tex2d = new Texture2D(TexPixelWdith, TexPixelHeight, TextureFormat.RGB24,true);
//计算颜色
UnityEngine.Color[] calcArray = CalcArrayColor();
//展示出来
tex2d.SetPixels(calcArray);
tex2d.Apply();
ri.texture = tex2d;
ri.texture.wrapMode = TextureWrapMode.Clamp;
}
//计算色相条上面需要展示的颜色数组
UnityEngine.Color[] CalcArrayColor()
{
//计算水平像素的等分增量
int addValue = (TexPixelWdith - 1) / 3;
//
for (int i = 0; i < TexPixelHeight; i++)
{
arrayColor[0, i] = UnityEngine.Color.red;
arrayColor[addValue, i] = UnityEngine.Color.green;
arrayColor[addValue+addValue, i] = UnityEngine.Color.blue;
arrayColor[TexPixelHeight - 1, i] = UnityEngine.Color.red;
}
UnityEngine.Color value = (UnityEngine.Color.green - UnityEngine.Color.red)/addValue;
for (int i = 0; i < TexPixelHeight; i++)
{
for (int j = 0; j < addValue; j++)
{
arrayColor[j, i] = UnityEngine.Color.red + value * j;
}
}
value = (UnityEngine.Color.blue - UnityEngine.Color.green)/ addValue;
for (int i = 0; i < TexPixelHeight; i++)
{
for (int j = addValue; j < addValue*2; j++)
{
arrayColor[j, i] = UnityEngine.Color.green + value * (j-addValue);
}
}
value = (UnityEngine.Color.red - UnityEngine.Color.blue) / ((TexPixelWdith - 1)-addValue-addValue);
for (int i = 0; i < TexPixelHeight; i++)
{
for (int j = addValue*2; j < TexPixelWdith - 1; j++)
{
arrayColor[j, i] = UnityEngine.Color.blue + value * (j- addValue * 2);
}
}
List<UnityEngine.Color> listColor = new List<UnityEngine.Color>();
for (int i = 0; i < TexPixelHeight; i++)
{
for (int j = 0; j < TexPixelWdith; j++)
{
listColor.Add(arrayColor[j, i]);
}
}
return listColor.ToArray();
}
/// <summary>
/// 获取颜色 根据高度
/// </summary>
/// <param name="value"></param>
/// <returns></returns>
public Color GetColorBySliderValue(float value)
{
float clampValue = Mathf.Clamp(value, 0.001f, 0.999f);
Color getColor=tex2d.GetPixel((int)((TexPixelWdith-1)*clampValue),0);
return getColor;
}
}
制作不易,给个赞呗~~
边栏推荐
- Eureka Client启动后就关闭 Unregistering application xxx with eureka with status DOWN
- MATLIB从excel表中读取数据并画出函数图像
- Cover fake big empty talk in robot material sorting
- [system analyst's road] Chapter 7 double disk system design (service-oriented development method)
- Please help xampp to do sqlilab is a black
- Wu Enda 2022 machine learning course evaluation is coming!
- 前置机是什么意思?主要作用是什么?与堡垒机有什么区别?
- leetcode:236. 二叉树的最近公共祖先
- Cloud native (32) | kubernetes introduction to platform storage system
- Docker starts MySQL and -emysql_ ROOT_ Password = my secret PW problem solving
猜你喜欢
Cover fake big empty talk in robot material sorting
使用MitmProxy离线缓存360度全景网页
每日刷题记录 (十五)
【无人机】多无人协同任务分配程序平台含Matlab代码
NFTScan 开发者平台推出 Pro API 商业化服务
JS addition, deletion, modification and query of JSON array
The "white paper on the panorama of the digital economy" has been released with great emphasis on the digitalization of insurance
How to implement Lua entry of API gateway
Knowledge * review
若依请求url中带有jsessionid的解决办法
随机推荐
Restoration analysis of protobuf protocol of bullet screen in station B
本地部署 zeppelin 0.10.1
Cover fake big empty talk in robot material sorting
CRMEB 商城系统如何助力营销?
How much does the mlperf list weigh when AI is named?
Talking about the current malpractice and future development
士大夫哈哈哈
The worse the AI performance, the higher the bonus? Doctor of New York University offered a reward for the task of making the big model perform poorly
(1) Chang'an chain learning notes - start Chang'an chain
Station B Big utilise mon monde pour faire un réseau neuronal convolutif, Le Cun Forward! Le foie a explosé pendant 6 mois, et un million de fois.
若依请求url中带有jsessionid的解决办法
Computer reinstallation system teaching, one click fool operation, 80% of people have learned
Gold three silver four, don't change jobs
The "white paper on the panorama of the digital economy" has been released with great emphasis on the digitalization of insurance
安全保护能力是什么意思?等保不同级别保护能力分别是怎样?
ArrayExpress数据库里的细胞只有两个txt是不是只能根据Line到ENA下载测序跑矩阵?
Win11怎么恢复传统右键菜单?Win11右键改回传统模式的方法
Automatically update selenium driver chromedriver
【212】php发送post请求有哪三种方法
Gradle知識概括