Qt自定義ColorDialog(支持RGB和HSV)

---

當我們做軟件開發的時候，經常需要編輯顏色，有時需要同時編輯RGB和HSV的顏色。

這是一個自定義的顏色對話框，如下圖所示

具有如下功能：

1. 支持RGB和HSV顏色值得修改和預覽
2. 支持添加自定義顏色（點擊按鈕添加或鼠標拖拽添加）

修改顏色效果預覽：

添加自定義顏色效果預覽：

顏色控件效果預覽：

下面是主要用到得技術點說明

1. HSV和RGB

RGB想必大家都不默認，但是實際生活中更爲常用的是HSV顏色空間
H: 表示 色調 ，取值爲0~355，使用度數表示它的值，0度爲紅色，120度爲綠色，240度爲藍色。

S: 表示色彩的 飽和度 ，取值範圍爲0~255，飽和度值越大，他的顏色就越豐滿。
V: 表示 亮度 ，取值範圍爲0~255，0爲黑色，值越大則約明亮。

Qt中使用 QColor 類可以方便的設置和獲取RGB顏色和YUV顏色值：

• 函數 getRgb() 和 rgb() 可以設置和獲取RGB顏色值
• 函數 setHsv() 和 getHsv() 可以設置和獲取HSV顏色值

2. H分量圓盤繪製

因爲H分量是根據度數決定的，這裏使用類 QConicalGradient 設置畫刷來繪製漸變效果，
關鍵代碼如下：

QConicalGradient conicalGradient(this->rect().center(), 0);
qreal interval = 1.0 / m_colorVec.size();
// 設置漸變顏色
for (int i=0; i<m_colorVec.size(); ++i)
{
    conicalGradient.setColorAt(interval * i, m_colorVec[i]);
}
conicalGradient.setColorAt(1.0, m_colorVec[0]);

// 繪製圓環
painter->setBrush(conicalGradient);
painter->setPen(QPen(Qt::NoPen));
int width = qMin(this->width(), this->height()) / 2 * 2;
QRect centerRect(this->rect().center().x() - width / 2, \
                 this->rect().center().y() - width / 2, \
                 width, width);
painter->drawEllipse(centerRect);

漸變位置值設置範圍爲 0~1 ，其中 m_colorVec 是一個 QVector<QColor> 類型的成員變量
初始化代碼如下：

m_colorVec << QColor(255, 0, 0) << QColor(255, 255, 0) \
           << QColor(0, 255, 0) << QColor(0, 255, 255) \
           << QColor(0, 0, 255) << QColor(255, 0, 255);

分別對應上圖 0~360度的顏色值。

3. SV畫布繪製

畫布的 X軸從左到右表示S值從0~255
Y軸從下到上表示V值從0~255
如下所示：

繪製方法：

1. 先繪製從最左側顏色值爲白色RGB(255,255,255)到最右側HSV(h,255,255)的漸變
2. 再繪製從最頂部顏色值爲RGBA(0, 0, 0, 0)到最底部RGBA(0, 0, 0, 255)的漸變

關鍵代碼如下：

// 繪製從左到右RGB(255,255,255)到HSV(h,255,255)的漸變
QLinearGradient linearGradientH(rect.topLeft(), rect.topRight());
linearGradientH.setColorAt(0, QColor(255, 255, 255));
QColor color;
color.setHsv(m_nHValue, 255, 255);
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);

---

作者：douzhq
個人主頁：不會飛的紙飛機
文章同步頁（可下載完整代碼）：Qt自定義ColorDialog(支持RGB和HSV)