위치에 따라 QSlider의 핸들 색상을 변경할 수 있습니까?

Question

나는 꽤 잘 스타일 시트를 통해 QSlider을 사용자 지정하는 방법을 이해하지만, 다음과 같은 것을 할 수있는 경우 궁금 :

                                 을                                     

나는 노란색 파란색에서 이동 슬라이더의 핸들을 싶습니다                  . 왼쪽에 설정하면 파란색입니다. 오른쪽으로 움직이면 파란색에서 노란색으로 기울어집니다.

는 스타일 시트를 통해 가능하다면, 어떻게? 그리고 그렇지 않다면, QSlider의 서브 클래스의 paintEvent에서 어떻게 구현할 수 있습니까?

Answer 1

당신은 정말 멋진 아무것도 할 필요가 없습니다, 주식 QSlider은 이미 당신이 해당 연결할 수 있도록 valueChanged(int) 신호를 가지고 함수는 위치에 따라 두 색상을 혼합하고 스타일 색상을 설정합니다. 여기서 최소한 예이다

static QColor operator+(const QColor & a, const QColor & b) { 
    return QColor(a.red() + b.red(), a.green() + b.green(), a.blue() + b.blue()); 
} 
static QColor operator*(const QColor & c, const qreal r) { 
    return QColor(c.red() * r, c.green() * r, c.blue() * r); 
} 

class Widget : public QWidget { 
    Q_OBJECT 
    public: 
    Widget(QWidget *parent = 0) : QWidget(parent), from(248, 181, 20), to(64, 150, 214) { 
     auto l = new QHBoxLayout(this); 
     setLayout(l); 
     s = new QSlider(Qt::Horizontal, this); 
     s->setMinimum(0); 
     s->setMaximum(100); 
     l->addWidget(s); 
     connect(s, &QSlider::valueChanged, this, &Widget::colorize); 
     colorize(s->value()); 
    } 
    private: 
    void colorize(int v) { 
     int d = s->maximum() - s->minimum(); 
     v = v - s->minimum(); 
     qreal rv = qreal(v)/d; 
     QColor c = from * rv + to * (1.0 - rv); 
     s->setStyleSheet(QString("QSlider::handle:horizontal {background-color: %1;}").arg(c.name())); 
    } 
    QSlider * s; 
    QColor from, to; 
}; 

이 어떤 슬라이더 범위 및 방향에 대한 작동이 코드는 기본적으로 1.0 범위 0.0에 대하여 핸들의 위치를 ​​발견하고 핸들을 설정 from 및 to 색을 혼합하는 것을 사용 색상을 각각의 값으로 조정합니다. 이상하게도, QColor에는 곱셈과 덧셈을 할 연산자가 없었기 때문에 상당히 편리 할 수 ​​있습니다.

또한, 대신에 두 가지 색상을 혼합 당신은 당신에게 약간 다른 기울기를 줄 것이다 HSL 형식의 색상을 구성 할 수 있습니다. 다음, 각각 42, 202 색상을 QColor에서 from/to을 수행 할 수 있습니다 변경 :

QColor c = QColor::fromHsl(205 - (205 - 42) * rv, 200, 135); 

이렇게하면 온도의 맥락에서 더 적용 할 수있는 두 고정 색상의 색조보다는 믹스 컬러 스윕을 줄 것이다 지금 중간에 당신이 녹색 "좀비"보다는 시안 틱 색상을 얻을 당신이 오렌지에 도착하기 전에 깨끗한 녹색을 통과

참고.

Answer 2

나는 간단한 스타일 시트를 사용하여이 작업을 수행 할 수 있다고 생각하지 않습니다. 그러나 이는 QSlider 클래스를 전문화하고 사용자가 커서를 이동할 때 적절한 스타일 시트를 적용하여 (즉, valueChanged이 에미 션 될 때) 쉽게 수행 할 수 있습니다. 여기

내가 트릭을한다는 것을 쓴 클래스입니다. 그것은 수평 및 수직 커서 작동 및 모든 색상을 사용하도록 사용자 정의 할 수 있습니다. 이것은 그라데이션 컬러 맵을 저장하는 QLinearGradient에서 QImage을 작성하고, 슬라이더의 값이 변경되면이 슬라이더의 위치에 기초하여 이미지에 해당 색상을 추출하여 스타일 시트를 통해 적용되는 경우.

재사용의 클래스는 일반적인 만들려고하지만 색상을 사용자 정의 만 수평 슬라이더를 사용할 필요가없는 경우는 간단하게 할 수있다.

gradientslider.h :

#include <QSlider> 
#include <QImage> 
#include <QColor> 

class GradientSlider : public QSlider 
{ 
    Q_OBJECT 
public: 
    GradientSlider(QColor from, QColor to, Qt::Orientation orientation, QWidget* parent); 

private slots: 
    void changeColor(int); 

private: 
    QImage gradient; 
}; 

gradientslider.cpp :

#include "gradientslider.h" 
#include <QLinearGradient> 
#include <QPainter> 

GradientSlider::GradientSlider(QColor from, QColor to, Qt::Orientation orientation, QWidget* parent) : 
    QSlider(orientation, parent), 
    gradient(QSize(100,100), QImage::Format_RGB32) 
{ 
    // create linear gradient 
    QLinearGradient linearGrad(QPointF(0, 0), (orientation==Qt::Horizontal) ? QPointF(100, 0) : QPointF(0, 100)); 
    linearGrad.setColorAt(0, from); 
    linearGrad.setColorAt(1, to); 

    // paint gradient in a QImage: 
    QPainter p(&gradient); 
    p.fillRect(gradient.rect(), linearGrad); 

    connect(this, SIGNAL(valueChanged(int)), this, SLOT(changeColor(int))); 

    // initialize 
    changeColor(value()); 
} 

void GradientSlider::changeColor(int pos) 
{ 
    QColor color; 

    if (orientation() == Qt::Horizontal) 
    { 
     // retrieve color index based on cursor position 
     int posIndex = gradient.size().width() * (pos - minimum())/(maximum() - minimum()); 
     posIndex = std::min(posIndex, gradient.width() - 1); 

     // pickup appropriate color 
     color = gradient.pixel(posIndex, gradient.size().height()/2); 
    } 
    else 
    { 
     // retrieve color index based on cursor position 
     int posIndex = gradient.size().height() * (pos - minimum())/(maximum() - minimum()); 
     posIndex = std::min(posIndex, gradient.height() - 1); 

     // pickup appropriate color 
     color = gradient.pixel(gradient.size().width()/2, posIndex); 
    } 

    // create and apply stylesheet! 
    // can be customized to change background and handle border! 
    setStyleSheet("QSlider::handle:" + ((orientation() == Qt::Horizontal) ? QString("horizontal"):QString("vertical")) + "{ \ 
           border-radius: 5px; \ 
           border: 2px solid #FFFFFF; \ 
           width: 20px; \ 
           margin: -5px 0; \ 
           background: " + color.name() + "}"); 
} 

지금 바로 수행

QHBoxLayout* layout = new QHBoxLayout(this); 
// horizontal slider: 
layout->addWidget(new GradientSlider(QColor(79,174,231), QColor(251,192,22), Qt::Horizontal, this)); 
// or, vertical slider: 
layout->addWidget(new GradientSlider(QColor(79,174,231), QColor(251,192,22), Qt::Vertical, this)); 

색상 QColor(79,174,231) (~ 파란색)과 012,359,(~ 노란색)은 원래 질문 게시판의 이미지에서 가져 왔으며 Qt::blue, Qt::yellow (약간 다른 채색으로 끝남)으로 바꿀 수 있습니다.

이 그것을 할 것입니다 :

사실