跳转至

颜色选择器

概览

ColorPickerManager 是驱动 Chroma Palette UI 的 MonoBehaviour。它会在所有支持的模式（HSV 矩形、色相轮、纹理/调色板取样等）之间同步调色板渲染、滑条、输入框与事件。所有模式都提供 HSV/RGB/CMYK/Hex 输入、透明度（Alpha）编辑、预览色板以及实时颜色变更事件，方便你把取色器接入任意工作流。

快速开始

Color Picker prefab layout
Color Picker prefab layout
  1. 将 ColorPicker.prefab（或 ColorPickerThemed.prefab）从 Assets/XDPaint/ChromaPalette/Prefabs/ 拖入场景。
  2. 把它放到 UI Canvas 中你希望显示取色器的位置。
  3. 通过代码把管理器与系统联动：
using UnityEngine;
using XDPaint.ChromaPalette;

public class PaintColorBinding : MonoBehaviour
{
    [SerializeField] private ColorPickerManager paletteManager;
    [SerializeField] private Material targetMaterial;

    void Start()
    {
        // 应用确认后的颜色
        paletteManager.OnColorChanged.AddListener(color => targetMaterial.color = color);

        // 拖动过程实时预览
        paletteManager.OnColorChanging.AddListener(color => targetMaterial.color = color);
    }
}

模式

ChromaPaletteMode 用于定义当前的布局/模式：

  • Rectangle：矩形渐变中的 饱和度 × 明度（S×V），并搭配独立的色相（Hue）滑条。
  • Circle：经典色相轮（色相在角度上、饱和度在半径上），并搭配明度（Value）滑条。
  • CircleFull：双圆锥 HSV 轮，在一个控件中结合色相、饱和度与明度。
  • CircleCircle：外圈色相环 + 内部 S/V 圆盘，便于全程使用圆形手势操作。
  • CircleTriangle：色相环 + HSV 三角形，适合高精度取色。
  • Texture：从指定纹理直接取样（截图、渐变贴图等）。
  • Palette：从生成的 ColorPalette 资源取样。

运行时切换模式：

paletteManager.SetMode(ChromaPaletteMode.CircleTriangle);

// Texture 模式辅助方法
paletteManager.SetPaletteTexture(myTexture);
paletteManager.SetMode(ChromaPaletteMode.Texture);

// Palette 模式使用 Palette Settings → Color Palette 中指定的资源
paletteManager.SetMode(ChromaPaletteMode.Palette);

关于在 Palette 模式中使用 ColorPalette 资源，请参见 调色板。

纹理与调色板设置

Texture 与 Palette 模式共享同一套 TextureBasedModeSettings，因此每个选项的行为保持一致：

  • Use Bicubic Sampling：对渐变进行平滑、高质量的插值采样。
  • Snap Cursor：将选择吸附到像素中心（需要平滑绘制时建议关闭）。
  • Ignore Transparent + Threshold：忽略 Alpha 低于阈值的像素。
  • Ignored Colors + Tolerance：提供应被跳过的颜色色块，并设置容差范围。
  • Source：TextureModeSettings.Texture 或 PaletteModeSettings.ColorPalette。

这些设置可通过 Inspector 或你自己的工具进行配置——大多数项目会把它们序列化在 prefab 上。

UI 组件

Color Picker UI overview

调色板 UI

  • Palette Image：显示颜色渐变的主 RawImage
  • Palette Rect：定义交互区域的 RectTransform
  • Palette Cursor：主取色光标
  • Palette Cursor 2：次级光标（在 CircleTriangle 与 CircleCircle 模式中用于色相环）
  • Cursor Contrast Mode：光标对比度调整（None、InvertColor、InvertLightness）

滑条

  • Hue Slider：控制色相，带渐变背景
  • Value Slider：控制明度/亮度（Value），带渐变背景
  • Alpha Slider：控制透明度（Alpha），带渐变背景

预览

  • Current Color Image：显示当前选中的颜色
  • Previous Color Image：显示上一次确认的颜色，便于快速对比

输入框

HSV 输入

  • H Input：色相（0–360）
  • S Input：饱和度（0–100）
  • V Input：明度/亮度（0–100）

RGB 输入

  • R Input：红色通道（0–255）
  • G Input：绿色通道（0–255）
  • B Input：蓝色通道（0–255）

CMYK 输入

  • C Input：青色（0–100）
  • M Input：品红（0–100）
  • Y Input：黄色（0–100）
  • K Input：黑（0–100）

其他输入

  • Hex Input：十六进制颜色代码（#RRGGBB 或 #RRGGBBAA）
  • Alpha Input：透明度（0–100）

所有输入都会校验并保持同步；修改任意字段都会更新其他字段与预览。

事件

  • OnColorChanging(Color)：用户拖动/选择过程中持续触发。
  • OnColorChanged(Color)：选择最终确认时触发（例如 pointer up）。

建议使用 OnColorChanging 做实时预览，使用 OnColorChanged 做最终提交。

脚本要点

// 从代码设置颜色（可选：抑制事件通知）
paletteManager.SetColor(Color.red, notify: true);

// 读取当前颜色
var current = paletteManager.CurrentColor;

// 运行时切换模式
paletteManager.SetMode(ChromaPaletteMode.CircleFull);

// 进入 Palette 模式前，确保在 Inspector 中已指定 ColorPalette 资源
paletteManager.SetMode(ChromaPaletteMode.Palette);

性能

  • 调色板与滑条渐变由 GPU 生成。
  • 分配极少；UI 仅在数值变化时更新。
  • 为减少更新频率，提交时优先使用 OnColorChanged。