如何使用C#实现基于单Trackbar的颜色选择器

实现核心逻辑 #

你要的单轨道彩色选择器本质是对单一色彩通道做映射，通常这类连续渐变的色条用HSV色彩空间的色相（Hue）通道实现，不需要拆分RGB三个轨道，核心步骤如下：

• 建立坐标到色值的映射规则：轨道左端对应Hue值0，右端对应Hue值360，滑块位置占轨道总长度的比例乘以360就能得到当前选中的Hue值
• 自定义绘制轨道背景：遍历轨道每一个横向像素点，将像素位置换算为Hue值后转成对应RGB颜色，逐点绘制即可得到连续的渐变彩色轨道
• 处理交互逻辑：监听鼠标按下、拖动事件，计算当前鼠标位置对应的轨道坐标，更新滑块位置，同时换算出对应的RGB颜色输出即可

关键代码参考 #

Hue转RGB工具方法 #

public static Color HueToRgb(double hue)
{
    hue = hue % 360;
    double r = 0, g = 0, b = 0;
    int sector = (int)(hue / 60);
    double fractional = hue / 60 - sector;
    double q = 1 - fractional, t = fractional;
    switch (sector)
    {
        case 0: r = 1; g = t; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = t; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = t; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    return Color.FromArgb((int)(r * 255), (int)(g * 255), (int)(b * 255));
}

WinForm自定义控件实现示例 #

继承Control类自定义控件，重写对应的绘制和事件方法即可：

public class HueTrackBar : Control
{
    private int _sliderPosition = 0;
    public Color SelectedColor => HueToRgb(_sliderPosition * 360.0 / this.Width);

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        // 绘制渐变轨道
        for (int x = 0; x < this.Width; x++)
        {
            Color c = HueToRgb(x * 360.0 / this.Width);
            using (Pen pen = new Pen(c))
            {
                e.Graphics.DrawLine(pen, x, 0, x, this.Height - 10);
            }
        }
        // 绘制滑块
        e.Graphics.FillRectangle(Brushes.Black, _sliderPosition - 2, this.Height - 10, 4, 10);
    }

    protected override void OnMouseDown(MouseEventArgs e)
    {
        base.OnMouseDown(e);
        UpdateSliderPosition(e.X);
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);
        if (e.Button == MouseButtons.Left)
        {
            UpdateSliderPosition(e.X);
        }
    }

    private void UpdateSliderPosition(int x)
    {
        _sliderPosition = Math.Clamp(x, 0, this.Width - 1);
        this.Invalidate();
    }

    // 此处放入上文的HueToRgb方法
}

WPF实现思路 #

WPF下可以直接通过动态生成LinearGradientBrush的渐变节点来绘制轨道，不需要逐像素绘制，性能更高。监听Slider的ValueChanged事件，将0~360的Value值用Hue转RGB方法换算即可得到选中颜色。

扩展说明 #

如果需要做其他类型的单轨道选择器（比如亮度条、饱和度条），只需要修改映射规则和背景绘制逻辑即可：比如亮度条可以固定Hue和饱和度，背景从黑色渐变到当前色相的纯色，滑块位置对应亮度值即可。

内容的提问来源于stack exchange，提问作者AshiMashi