水平和垂直QLineargradient

Question

我正在尝试使用

QGraphicsView

生成可点击的 HVS 色彩空间小部件。整个

QGraphicsView

的背景应如下图所示（没有 jpeg-artefacts）。单击位置 (x,y) 将给出光标下的颜色。

我不想直接使用图像，而是考虑使用 Qt 样式表在两个方向（水平和垂直）上使用

QLinearGradient

。

简单地使用水平色标很简单，但我不知道如何添加额外的垂直（白-色-黑）渐变。

到目前为止我得到的（在

QGraphicsView

继承类的构造函数中）是：

QColor hsvColor[6];
hsvColor[0].setHsv(0, 255, 255);
hsvColor[1].setHsv(60, 255, 255);
hsvColor[2].setHsv(120, 255, 255);
hsvColor[3].setHsv(180, 255, 255);
hsvColor[4].setHsv(240, 255, 255);
hsvColor[5].setHsv(300, 255, 255);

QString styleH = QString("background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,") +
                 QString("stop:0.000 rgba(%1, %2, %3, 255),").arg( hsvColor[0].red() ).arg( hsvColor[0].green() ).arg( hsvColor[0].blue() ) +
                 QString("stop:0.166 rgba(%1, %2, %3, 255),").arg( hsvColor[1].red() ).arg( hsvColor[1].green() ).arg( hsvColor[1].blue() ) +
                 QString("stop:0.333 rgba(%1, %2, %3, 255),").arg( hsvColor[2].red() ).arg( hsvColor[2].green() ).arg( hsvColor[2].blue() ) +
                 QString("stop:0.500 rgba(%1, %2, %3, 255),").arg( hsvColor[3].red() ).arg( hsvColor[3].green() ).arg( hsvColor[3].blue() ) +
                 QString("stop:0.666 rgba(%1, %2, %3, 255),").arg( hsvColor[4].red() ).arg( hsvColor[4].green() ).arg( hsvColor[4].blue() ) +
                 QString("stop:0.833 rgba(%1, %2, %3, 255),").arg( hsvColor[5].red() ).arg( hsvColor[5].green() ).arg( hsvColor[5].blue() ) +
                 QString("stop:1.000 rgba(%1, %2, %3, 255));").arg( hsvColor[0].red() ).arg( hsvColor[0].green() ).arg( hsvColor[0].blue() );
this->setStyleSheet(styleH);

这给了我：

如何使用

QLinearGradient

和 Qt 样式表绘制如上所述的 xy 渐变？

Answer 1

我知道这已经很老了，但它仍然可能对其他人有帮助。

所以基本上这里的技巧是在 QGraphicsView 中有 2 个渐变，一组作为颜色的背景（从左到右），一组作为前景（从上到下）。

// a colored background based on hue
QLinearGradient colorGradient = QLinearGradient(0, 0, width(), 0);
colorGradient.setSpread(QGradient::RepeatSpread);
colorGradient.setColorAt(0, QColor(255,255,255));
colorGradient.setColorAt(1, currentHue);

QLinearGradient blackGradient = QLinearGradient(0, 0, 0, height());
blackGradient.setSpread(QGradient::RepeatSpread);
blackGradient.setColorAt(0, QColor(0,0,0,0));
blackGradient.setColorAt(1, QColor(0,0,0,255));


QBrush colorGradiantBrush = QBrush(colorGradient);
QBrush blackGradiantBrush = QBrush(blackGradient);
scene.setBackgroundBrush(colorGradiantBrush);
scene.setForegroundBrush(blackGradiantBrush);

上面的代码为您提供了一个带有一种颜色的调色板，如下所示：

对于前景，我使用了透明到黑色 - 您将需要白色到透明到黑色。对于背景，我使用了白色到特定颜色 - 您可以使用已有的光谱。