Qt颜色选择器（HSV）

引言

基于Qt实现的HSV颜色选择器，效果如下：

HSV颜色空间

HSV(Hue, Saturation, Value)是根据颜色的直观特征创建的颜色模型，如下图所示：

Hue为色调，通过角度表示不同的颜色，取值范围是0°到359°。Saturation为饱和度，取值范围是0到1。Value为明度，表示颜色明暗，值越大越亮，取值范围是0到1。下述实现方案中，饱和度和明度的范围改为0到255。

实现思路

按照上述模型，实现的关键就是将圆锥的三维投影到二维平面，右侧滑动条表示色调Hue，从0到359。中间画布横坐标表示饱和度Saturation，从0到255，纵坐标表示明度Value，从0到255。滑动条通过修改样式表实现，画布通过paintEvent实现。

代码实现

详细代码如下：

class ColorHueBar : public QWidget
{
    Q_OBJECT

public:
    ColorHueBar(QWidget *parent = nullptr);
    ~ColorHueBar();

    void setValue(int val);
    int value();

signals:
    void sig_valueChanged(int val);

private:
    QSlider* m_slider;
};

class ColorSVCanvas : public QWidget
{
    Q_OBJECT

public:
    ColorSVCanvas(QWidget *parent = nullptr);
    ~ColorSVCanvas();

    bool setHue(int hue);
    bool setSaturationValue(int saturation, int value);
    bool setSaturationValue(QPoint saturationValue);

    QColor color();
    QRect availabilityRect();
    int margin();

signals:
    void sig_colorChanged(const QColor &color);

protected:
    void paintEvent(QPaintEvent* ev) Q_DECL_OVERRIDE;
    void resizeEvent(QResizeEvent* ev) Q_DECL_OVERRIDE;
    bool eventFilter(QObject* obj, QEvent* ev) Q_DECL_OVERRIDE;

private:
    QPoint valueFromPos(QPoint& pos);
    QPoint posFromValue(QPoint& val);

private:
    int m_margin;
    int m_radius;
    int m_saturationMax;
    int m_valueMax;

    int m_hue;
    QPoint m_pos;
};

class ColorChecker : public QWidget
{
    Q_OBJECT

public:
    ColorChecker(QWidget *parent = nullptr);
    ~ColorChecker();

protected:
    void paintEvent(QPaintEvent* ev) Q_DECL_OVERRIDE;

private:
    int m_checkerSize;
};

class ColorAlphaBar : public QWidget
{
    Q_OBJECT

public:
    ColorAlphaBar(QWidget *parent = nullptr);
    ~ColorAlphaBar();

    void setColor(QColor color);
    QColor color();

    void setValue(int alpha);

signals:
    void sig_colorChanged(const QColor &color);

protected:
    void resizeEvent(QResizeEvent* ev) Q_DECL_OVERRIDE;

private:
    ColorChecker* m_checker;
    QSlider* m_slider;
    QColor m_color;

    int m_grooveHeight;
};

class ColorWorkbench : public QDialog
{
    Q_OBJECT

public:
    ColorWorkbench(QWidget *parent = nullptr);
    ~ColorWorkbench();

    void setColor(QColor color);

signals:
    void sig_colorChanged(const QColor &color);

private:
    QColor colorFromStr(QString str);

private slots:
    void slot_colorDisplay(const QColor &color);
    void slot_colorEdit(const QString &text);

private:
    ColorSVCanvas* m_canvas;
    ColorHueBar* m_hsvBar;
    ColorAlphaBar* m_alphaSlider;
    QLineEdit* m_lineEdit;
    QPushButton* m_clearBtn;
    QPushButton* m_confirmBtn;
};

class ColorPicker : public QLabel
{
    Q_OBJECT

public:
    ColorPicker(QWidget *parent = nullptr);
    ~ColorPicker();

protected:
    void resizeEvent(QResizeEvent* ev) Q_DECL_OVERRIDE;

private:
    void setColor(const QColor &color);

private slots:
    void slot_showPopup();
    void slot_colorChanged(const QColor &color);

private:
    QPushButton* m_button;
    ColorChecker* m_checker;
    ColorWorkbench* m_popup;

    QColor m_curColor;
    QColor m_oriColor;
};

ColorHueBar::ColorHueBar(QWidget *parent)
    : QWidget(parent)
{
    m_slider = new QSlider(this);
    m_slider->setMaximum(359);
    m_slider->setFixedWidth(16);
    m_slider->setStyleSheet("QSlider::groove:vertical {width: 12px; \
                                background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, \
                                    stop:0 hsv(0,255,255), \
                                    stop:0.17 hsv(59,255,255), \
                                    stop:0.33 hsv(119,255,255), \
                                    stop:0.5 hsv(179,255,255), \
                                    stop:0.67 hsv(239,255,255), \
                                    stop:0.83 hsv(299,255,255), \
                                    stop:1 hsv(359,255,255));} \
                            QSlider::handle:vertical { \
                                background: white; \
                                height: 4px; \
                                margin:0px -2px; \
                                border: 1px solid grey; \
                                border-radius: 2px;} \
                            QSlider::add-page:vertical {background: transparent;} \
                            QSlider::sub-page:vertical {background: transparent;}");
    setValue(0);
    connect(m_slider, &QSlider::valueChanged, this, [this]{
        emit sig_valueChanged(value());
    });

    auto mainLayout = new QHBoxLayout(this);
    mainLayout->setMargin(0);
    mainLayout->setSpacing(0);
    mainLayout->addWidget(m_slider);
}

ColorHueBar::~ColorHueBar()
{

}

void ColorHueBar::setValue(int val)
{
    m_slider->setValue(qAbs(val - m_slider->maximum()));
}

int ColorHueBar::value()
{
    return qAbs(m_slider->value() - m_slider->maximum());
}

ColorSVCanvas::ColorSVCanvas(QWidget *parent)
    : QWidget(parent)
    , m_margin(5)
    , m_radius(m_margin - 1)
    , m_saturationMax(255)
    , m_valueMax(255)
    , m_hue(0)
    , m_pos(QPoint(-1, -1))
{
    installEventFilter(this);
}

ColorSVCanvas::~ColorSVCanvas()
{

}

bool ColorSVCanvas::setHue(int hue)
{
    if(hue < 0 || hue > 359)
        return false;

    m_hue = hue;

    update();
    emit sig_colorChanged(color());

    return true;
}

bool ColorSVCanvas::setSaturationValue(int saturation, int value)
{
    return setSaturationValue(QPoint(saturation, value));
}

bool ColorSVCanvas::setSaturationValue(QPoint saturationValue)
{
    if(!QRect(0,0,256,256).contains(saturationValue))
        return false;

    m_pos = posFromValue(saturationValue);

    update();
    emit sig_colorChanged(color());

    return true;
}

QColor ColorSVCanvas::color()
{
    QPoint tmpVal = valueFromPos(m_pos);
    QColor tmpColor;
    tmpColor.setHsv(m_hue, tmpVal.x(), tmpVal.y());
    return tmpColor;
}

QRect ColorSVCanvas::availabilityRect()
{
    QRect tmpRect(m_margin, m_margin, width() - m_margin * 2, height() - m_margin * 2);
    return tmpRect;
}

int ColorSVCanvas::margin()
{
    return m_margin;
}

void ColorSVCanvas::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QRect rect = availabilityRect();

    // 绘制从左到右RGB(255,255,255)到HSV(h,255,255)的渐变
    QLinearGradient linearGradientH(rect.topLeft(), rect.topRight());
    linearGradientH.setColorAt(0, Qt::white);
    QColor color;
    color.setHsv(m_hue, m_saturationMax, m_valueMax);
    linearGradientH.setColorAt(1, color);
    painter.fillRect(rect, linearGradientH);

    // 绘制顶部颜色值为RGBA(0,0,0,0)到最底部RGBA(0,0,0,255)的渐变
    QLinearGradient linearGradientV(rect.topLeft(), rect.bottomLeft());
    linearGradientV.setColorAt(0, QColor(0, 0, 0, 0));
    linearGradientV.setColorAt(1, QColor(0, 0, 0, 255));
    painter.fillRect(rect, linearGradientV);

    painter.setPen(QColor(Qt::darkGray));
    painter.drawEllipse(m_pos, m_radius, m_radius);
}

void ColorSVCanvas::resizeEvent(QResizeEvent *)
{
    if(m_pos == QPoint(-1, -1)){
        setSaturationValue(255, 255);
    }
}

bool ColorSVCanvas::eventFilter(QObject *obj, QEvent *ev)
{
    if(obj == this){
        if(ev->type() == QEvent::MouseButtonPress){
            if(availabilityRect().contains(mapFromGlobal(QCursor::pos()))){
                m_pos = mapFromGlobal(QCursor::pos());
                update();
                emit sig_colorChanged(color());
            }
        }
    }
    return QWidget::eventFilter(obj, ev);
}

QPoint ColorSVCanvas::valueFromPos(QPoint &pos)
{
    QRect tmpRect = availabilityRect();

    QPoint tmpPos = pos - tmpRect.topLeft();
    int saturation = tmpPos.x() * m_saturationMax / tmpRect.width();
    int value = qAbs(tmpPos.y() * m_valueMax / tmpRect.height() - m_valueMax);

    return QPoint(saturation, value);
}

QPoint ColorSVCanvas::posFromValue(QPoint &val)
{
    QRect tmpRect = availabilityRect();

    int tmpX = val.x() * tmpRect.width() / m_saturationMax;
    int tmpY = qAbs(val.y() - m_valueMax) * tmpRect.height() / m_valueMax;

    return QPoint(tmpX, tmpY) + tmpRect.topLeft();
}

ColorChecker::ColorChecker(QWidget *parent)
    : QWidget(parent)
    , m_checkerSize(6)
{

}

ColorChecker::~ColorChecker()
{

}

void ColorChecker::paintEvent(QPaintEvent *ev)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    int rowCount = ev->rect().height() / m_checkerSize + 1;
    int colCount = ev->rect().width() / m_checkerSize + 1;

    for(int i=0; i < rowCount; i++){
        for(int j=0; j < colCount; j++){
            QRect checkerRect(m_checkerSize * j, m_checkerSize * i, m_checkerSize, m_checkerSize);

            QColor checkerColor;
            if(((j + i % 2) % 2) == 0){
                checkerColor = Qt::darkGray;
            }else{
                checkerColor = Qt::white;
            }
            painter.fillRect(checkerRect, checkerColor);
        }
    }
}

ColorAlphaBar::ColorAlphaBar(QWidget *parent)
    : QWidget(parent)
    , m_grooveHeight(12)
{
    m_checker = new ColorChecker(this);

    m_slider = new QSlider(Qt::Horizontal, this);
    m_slider->setMaximum(255);
    m_slider->setValue(m_slider->maximum());
    m_slider->setFixedHeight(16);
    setColor(Qt::red);

    connect(m_slider, &QSlider::valueChanged, this, [this]{
        emit sig_colorChanged(color());
    });

    auto mainLayout = new QVBoxLayout(this);
    mainLayout->setMargin(0);
    mainLayout->setSpacing(0);
    mainLayout->addWidget(m_slider);
}

ColorAlphaBar::~ColorAlphaBar()
{

}

void ColorAlphaBar::setColor(QColor oriColor)
{
    m_color = oriColor;
    m_color.setAlpha(255);

    QColor tmpColor(oriColor);
    tmpColor.setAlpha(0);

    m_slider->setStyleSheet(QString("QSlider::groove:horizontal { \
                                        height: %3px; \
                                        background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, \
                                        stop:0 %1, \
                                        stop:1 %2);} \
                                    QSlider::handle:horizontal { \
                                        background: white; \
                                        width: 4px; \
                                        margin: -2px 0; \
                                        border: 1px solid grey; \
                                        border-radius: 2px;} \
                                    QSlider::add-page:horizontal {background: transparent;} \
                                    QSlider::sub-page:horizontal {background: transparent;}")
                                    .arg(tmpColor.name(QColor::HexArgb))
                                    .arg(m_color.name())
                                    .arg(m_grooveHeight));

    emit sig_colorChanged(color());
}

QColor ColorAlphaBar::color()
{
    QColor tmpColor(m_color);
    tmpColor.setAlpha(m_slider->value());
    return tmpColor;
}

void ColorAlphaBar::setValue(int alpha)
{
    m_slider->setValue(alpha);
}

void ColorAlphaBar::resizeEvent(QResizeEvent *)
{
    m_checker->setGeometry(0, (height() - m_grooveHeight) / 2, width(), m_grooveHeight);
}

ColorWorkbench::ColorWorkbench(QWidget *parent)
    : QDialog(parent, Qt::Popup)
{
    setFixedSize(320, 250);
    setAttribute(Qt::WA_StyledBackground);
    setObjectName("workbench");
    setStyleSheet("#workbench{background-color:white; border:1px solid rgb(245,245,245); border-radius: 6px;}");

    m_canvas = new ColorSVCanvas(this);
    m_canvas->setFixedSize(280, 180);

    m_hsvBar = new ColorHueBar(this);
    m_hsvBar->setFixedHeight(m_canvas->availabilityRect().height());

    m_alphaSlider = new ColorAlphaBar(this);
    m_alphaSlider->setFixedWidth(m_canvas->availabilityRect().width());

    m_lineEdit = new QLineEdit(this);

    m_clearBtn = new QPushButton("clear",this);
    m_clearBtn->setVisible(false);

    m_confirmBtn = new QPushButton("confirm", this);
    connect(m_confirmBtn, &QPushButton::clicked, this, [this]{
        accept();
    });

    connect(m_hsvBar, &ColorHueBar::sig_valueChanged, this, [this](int val){
        m_canvas->setHue(val);
    });
    connect(m_canvas, &ColorSVCanvas::sig_colorChanged, this, [this](const QColor &color){
        m_alphaSlider->setColor(color);
    });
    connect(m_alphaSlider, &ColorAlphaBar::sig_colorChanged, this, &ColorWorkbench::slot_colorDisplay);
    connect(m_lineEdit, &QLineEdit::textEdited, this, &ColorWorkbench::slot_colorEdit);

    // 布局
    auto handleLayout = new QHBoxLayout;
    handleLayout->addSpacing(m_canvas->margin());
    handleLayout->addWidget(m_lineEdit);
    handleLayout->addStretch();
    handleLayout->addWidget(m_clearBtn);
    handleLayout->addWidget(m_confirmBtn);

    auto alphaLayout = new QHBoxLayout;
    alphaLayout->setMargin(0);
    alphaLayout->addSpacing(m_canvas->margin());
    alphaLayout->addWidget(m_alphaSlider);

    auto mainLayout = new QGridLayout(this);
    mainLayout->addWidget(m_canvas, 0, 0);
    mainLayout->addWidget(m_hsvBar, 0, 1);
    mainLayout->addLayout(alphaLayout, 1, 0);
    mainLayout->addLayout(handleLayout, 2, 0, 1, 2);
}

ColorWorkbench::~ColorWorkbench()
{

}

void ColorWorkbench::setColor(QColor color)
{
    m_hsvBar->setValue(color.hsvHue());
    m_canvas->setSaturationValue(color.hsvSaturation(), color.value());
    m_alphaSlider->setValue(color.alpha());
}

QColor ColorWorkbench::colorFromStr(QString str)
{
    QColor color(str);
    if(!color.isValid()){
        QString tmpStr = str;
        QRegExp rx("[^\\d+^,^.]");
        if(str.contains(rx)){
            tmpStr.remove(rx);
        }
        if(!tmpStr.isEmpty()){
            QStringList strList = tmpStr.split(",");
            if(str.contains("rgba") && strList.count() == 4){
                color.setRgb(strList.at(0).toInt(), strList.at(1).toInt(), strList.at(2).toInt());
                if(strList.at(3).toDouble()>1){
                    color.setAlpha(strList.at(3).toInt());
                }else{
                    color.setAlphaF(strList.at(3).toDouble());
                }
            }
            else if(str.contains("rgb") && strList.count() == 3){
                color.setRgb(strList.at(0).toInt(), strList.at(1).toInt(), strList.at(2).toInt());
            }
            else if(str.contains("hsv") && strList.count() == 3){
                color.setHsv(strList.at(0).toInt(), strList.at(1).toInt(), strList.at(2).toInt());
            }
        }
    }

    return color;
}

void ColorWorkbench::slot_colorDisplay(const QColor& color)
{
    QRegExp reg("(\\.){0,1}0+$");// 去除末尾0
    m_lineEdit->setText(QString("rgba(%1, %2, %3, %4)")
                        .arg(color.red())
                        .arg(color.green())
                        .arg(color.blue())
                        .arg(QString::number(color.alphaF(), 'f', 2).replace(reg, "")));

    emit sig_colorChanged(color);
}

void ColorWorkbench::slot_colorEdit(const QString &text)
{
    QColor color = colorFromStr(text);
    if(color.isValid()){
        disconnect(m_alphaSlider, &ColorAlphaBar::sig_colorChanged, this, &ColorWorkbench::slot_colorDisplay);
        setColor(color);
        connect(m_alphaSlider, &ColorAlphaBar::sig_colorChanged, this, &ColorWorkbench::slot_colorDisplay);

        emit sig_colorChanged(color);
    }
}

ColorPicker::ColorPicker(QWidget *parent)
    : QLabel(parent)
{
    m_checker = new ColorChecker(this);

    m_popup = new ColorWorkbench(this);
    connect(m_popup, &ColorWorkbench::sig_colorChanged, this, &ColorPicker::slot_colorChanged);
    connect(m_popup, &QDialog::finished, this, [this](int result){
        if(result == QDialog::Accepted){
            m_oriColor = m_curColor;
        }
        else{
            setColor(m_oriColor);
        }
    });

    m_button = new QPushButton("v", this);
    m_button->setFixedSize(30, 30);
    connect(m_button, &QPushButton::pressed, this, &ColorPicker::slot_showPopup);

    setFixedSize(40, 40);
    setStyleSheet(QString("QLabel{border:1px solid %1; border-radius: 4px; background-color: %2;}")
                  .arg(QColor(230, 230, 230).name())
                  .arg(QColor(Qt::white).name()));
    setColor(QColor(255,0,0,150));

    auto mainLayout = new QHBoxLayout(this);
    mainLayout->setMargin(0);
    mainLayout->addWidget(m_button);
}

ColorPicker::~ColorPicker()
{

}

void ColorPicker::resizeEvent(QResizeEvent *)
{
    m_checker->setGeometry(m_button->geometry());
}

void ColorPicker::setColor(const QColor &color)
{
    m_curColor = color;
    m_button->setStyleSheet(QString("QPushButton{border:1px solid %1; background-color:%2}")
                            .arg(QColor(152,152,152).name())
                            .arg(color.name(QColor::HexArgb)));
}

void ColorPicker::slot_showPopup()
{
    m_oriColor = m_curColor;
    m_popup->setColor(m_oriColor);

    QPoint tmpPos = mapToGlobal(m_button->geometry().center());
    tmpPos += QPoint(-m_popup->width() / 2, m_button->height() / 2 + 5);
    m_popup->move(tmpPos);

    m_popup->open();
}

void ColorPicker::slot_colorChanged(const QColor &color)
{
    if (m_popup->isVisible()) {
        setColor(color);
    }
}