取色器实战（Qt含源码）

      取色器是软件开发中常用的小工具，为了方便在开发中取色，我自己开发了一款取色器，简单好用，主要是如果功能上有缺陷的我还能自己添加。

一、功能介绍

1. 点击选择自动截取当前屏幕图片，通过选择当前图片的色素来获取当前对应位置的颜色。

2. 复制按钮，可以复制右边选择框的内容。

3. 通过移动条形框，可以选择对应的颜色的RGB值。

4. 通过输入RGB值可以直接获取右边16进制的值。

5. 通过输入6位16进制的值可以获取对应的RGB值。

二、功能开发

1. 布局

布局说明如下图：

main布局使用垂直布局的方式。然后每一个layout使用水平布局方式。

void MainWindow::initUI()
{
    setWindowTitle("取色器");
    m_ptrWdgMain->setLayout(m_ptrLayoutMain);
    m_ptrLabShowColor = updateShowLable(m_ptrLabShowColor, Qt::black);
    m_ptrLabShowColor->setFixedSize(50, 50);
    m_ptrLayoutShowColor->addWidget(m_ptrLabShowColor);

    m_ptrLabShowRed = updateShowLable(m_ptrLabShowRed, Qt::black);
    m_ptrSliderRed = updateSlider(m_ptrSliderRed);
    m_ptrLabRed = updateShowLable(m_ptrLabRed, Qt::red);
    m_ptrLayoutRed->addWidget(m_ptrLabShowRed);
    m_ptrLayoutRed->addWidget(m_ptrSliderRed);
    m_ptrLayoutRed->addWidget(m_ptrLabRed);
    m_ptrLayoutRed->addWidget(m_ptrLineRed);
    m_ptrLineRed->setPlaceholderText("0-255");
    m_ptrLineRed->setText("0");

    m_ptrLabShowGreen = updateShowLable(m_ptrLabShowGreen, Qt::black);
    m_ptrSliderGreen = updateSlider(m_ptrSliderGreen);
    m_ptrLabGreen = updateShowLable(m_ptrLabGreen, Qt::green);
    m_ptrLayoutGreen->addWidget(m_ptrLabShowGreen);
    m_ptrLayoutGreen->addWidget(m_ptrSliderGreen);
    m_ptrLayoutGreen->addWidget(m_ptrLabGreen);
    m_ptrLayoutGreen->addWidget(m_ptrLineGreen);
    m_ptrLineGreen->setPlaceholderText("0-255");
    m_ptrLineGreen->setText("0");

    m_ptrLabShowBlue = updateShowLable(m_ptrLabShowBlue, Qt::black);
    m_ptrSliderBlue = updateSlider(m_ptrSliderBlue);
    m_ptrLabBlue = updateShowLable(m_ptrLabBlue, Qt::blue);
    m_ptrLayoutBlue->addWidget(m_ptrLabShowBlue);
    m_ptrLayoutBlue->addWidget(m_ptrSliderBlue);
    m_ptrLayoutBlue->addWidget(m_ptrLabBlue);
    m_ptrLayoutBlue->addWidget(m_ptrLineBlue);
    m_ptrLineBlue->setPlaceholderText("0-255");
    m_ptrLineBlue->setText("0");

    m_ptrLayoutButton->addWidget(m_ptrBtnPickColor);
    m_ptrLayoutButton->addWidget(m_ptrBtnCopy);
    m_ptrLayoutButton->addWidget(m_ptrLineColor);
    m_ptrLineColor->setPlaceholderText("6位16进制");
    m_ptrLayoutMain->addLayout(m_ptrLayoutShowColor);
    m_ptrLayoutMain->addLayout(m_ptrLayoutRed);
    m_ptrLayoutMain->addLayout(m_ptrLayoutGreen);
    m_ptrLayoutMain->addLayout(m_ptrLayoutBlue);
    m_ptrLayoutMain->addLayout(m_ptrLayoutButton);

    this->setCentralWidget(m_ptrWdgMain);
}

2. 控件消息绑定

QAbstractSlider::valueChanged ：当滑动按钮值变动时触发。

QLineEdit::textChanged：当编辑按钮变动时触发。

QLineEdit::returnPressed：在结果编辑框回车时触发。

QPushButton::clicked ：在按钮按下时触发。

void MainWindow::initConnect()
{
    connect(m_ptrSliderRed, SIGNAL(valueChanged(int)), this,
            SLOT(slotRedValue(int)));
    connect(m_ptrSliderGreen, SIGNAL(valueChanged(int)), this,
            SLOT(slotGreenValue(int)));
    connect(m_ptrSliderBlue, SIGNAL(valueChanged(int)), this,
            SLOT(slotBlueValue(int)));
    connect(m_ptrBtnPickColor, SIGNAL(clicked()), this, SLOT(slotPickColor()));
    connect(m_ptrBtnCopy, SIGNAL(clicked()), this, SLOT(slotCopyColorValue()));
    connect(m_ptrWdgPick, SIGNAL(finished(int)), this,
            SLOT(slotClosePickWidget(int)));
    connect(m_ptrWdgPick, &QPickWidget::sigColor, this,
            &MainWindow::slotGetColor);
    connect(m_ptrLineRed, SIGNAL(textChanged(QString)), this,
            SLOT(slotRedValueChange(QString)));
    connect(m_ptrLineGreen, SIGNAL(textChanged(QString)), this,
            SLOT(slotGreenValueChange(QString)));
    connect(m_ptrLineBlue, SIGNAL(textChanged(QString)), this,
            SLOT(slotBlueValueChange(QString)));

    // 绑定回车
    connect(m_ptrLineColor, &QLineEdit::returnPressed, this, [this]() {
        QString strColor = m_ptrLineColor->text();
        if (strColor.size() != 6) {
            return;
        }
        QColor color("#" + strColor);

        m_ptrLineRed->setText(QString::number(color.red()));
        m_ptrLineGreen->setText(QString::number(color.green()));
        m_ptrLineBlue->setText(QString::number(color.blue()));
        qInfo() << "m_ptrLineColor" << m_ptrLineColor->text();
    });
}

3. 控件消息处理

3.1 按钮选择按钮

隐藏本应用然后，然后截取桌面全屏，然后将应用的图片展示全屏。

void MainWindow::slotPickColor()
{
    this->hide();
    QTimer::singleShot(200, this, &MainWindow::slotShowPick);
}

void MainWindow::slotShowPick()
{
    QScreen *screen = QGuiApplication::primaryScreen();
    m_ptrWdgPick->setPickPicture(screen->grabWindow(0));
    m_ptrWdgPick->showFullScreen();
}

3.2 滚动选择框

当前滚动值改变时，改变文本编辑框的内容。

void MainWindow::slotGreenValueChange(QString strValue)
{
    m_ptrSliderGreen->setValue(strValue.toInt());
}

3.3 输入框值改变

当用户输入框输入内容时，修改滚动条的值，并且改变颜色。

void MainWindow::updateShowColor()
{
    m_ptrLabShowColor->setPalette(
        QPalette(QPalette::Background, QColor(m_iRed, m_iGreen, m_iBulle)));
    QString strRed = QString("%1").arg(m_iRed, 2, 16, QLatin1Char('0'));
    QString strGreen = QString("%1").arg(m_iGreen, 2, 16, QLatin1Char('0'));
    QString strBlue = QString("%1").arg(m_iBulle, 2, 16, QLatin1Char('0'));
    m_ptrLineColor->setText(strRed + strGreen + strBlue);
}

void MainWindow::slotRedValue(int value)
{
    m_ptrLineRed->setText(QString::number(value));
    m_iRed = value;
    updateLable(value, Red);
    updateShowColor();
}

4. 选择框逻辑

获取鼠标的坐标点。

1. 使用控件qlabel来展示放大的图。

2. 鼠标移动qlabel控件跟随移动。

3. 截取鼠标位置点的图片。

#include "qpickwidget.h"
#include <QKeyEvent>
#include <QtDebug>
#include <QBrush>
#include <QPalette>
#include <QRgb>
QPickWidget::QPickWidget(QWidget *parent)
    : QDialog(parent)
    , m_ptrLabMouse(new QLabel(this))
{
    m_ptrLabMouse->setFixedSize(100, 100);
    m_ptrLabMouse->setAutoFillBackground(true);
    m_ptrLabMouse->setPalette(QPalette(QPalette::Background, QColor(Qt::red)));
    m_ptrLabMouse->setAttribute(Qt::WA_TransparentForMouseEvents, true);
    this->setMouseTracking(true);
    setCursor(Qt::CrossCursor);
    initConnect();
}

void QPickWidget::setPickPicture(QPixmap pixmap)
{
    m_pixmapPickPicture = pixmap;
    QPalette p;
    p.setBrush(QPalette::Background, QBrush(pixmap));
    this->setPalette(p);
}

void QPickWidget::initConnect()
{
   // connect(this, SIGNAL(clicked()), this, SLOT(slotPickColor));
}

void QPickWidget::slotPickColor() { this->close(); }

void QPickWidget::keyPressEvent(QKeyEvent *event)
{
    if (event->key() == Qt::Key_Escape) {
        this->close();
    }
}

void QPickWidget::showEvent(QShowEvent *event) { qInfo() << "showEvent"; }

void QPickWidget::mouseMoveEvent(QMouseEvent *event)
{
    int mouse_x = event->x();
    int mouse_y = event->y();
    m_ptrLabMouse->move(mouse_x - m_ptrLabMouse->width() / 2,
                        mouse_y - m_ptrLabMouse->height() / 2);
    // QRect rect(mouse_x - 3.5, mouse_y, 7, 7);
    QPixmap cropped =
        m_pixmapPickPicture.copy(mouse_x -4, mouse_y -4, 9, 9);
    QPixmap cropped1 = cropped.scaled(100, 100, Qt::KeepAspectRatio);

    QPalette p;
    p.setBrush(QPalette::Background, QBrush(cropped1));
    m_ptrLabMouse->setPalette(p);
}

void QPickWidget::mousePressEvent(QMouseEvent *event)
{
    qInfo() << "mousePressEvent";
    QRgb tmp_rgb = m_pixmapPickPicture.toImage().pixel(event->x(), event->y());
    QColor rgb(tmp_rgb);
    emit sigColor(rgb.red(), rgb.green(), rgb.blue());
    this->close();
}

5. 源码

源码地址：三雷科技 / getColor · GitCode