QT 进度条、滑动条、调色板、取色器

超、凢脫俗 2022-04-10 07:29 319阅读 0赞

### **QT 进度条、滑动条、调色板、取色器** ###

**一、简述**

**       记--QT 进度条、滑动条简单的使用例子，调色板练习。**

**       例子1：链接: https://pan.baidu.com/s/1NBv2-ptbcOEB3IYhBeCguQ 提取码: b86q **

**       例子2：链接: https://pan.baidu.com/s/1RDsbQ9agAVJYPnWCabEBug 提取码: 66he**

**二、例子1 进度条例子**

**         2.1  效果：**

![20181228173615166.gif][]

**        2.2  工程结构：**

**                  **![20181228181131554.png][]

布局：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70][]

**         2.3  源文件**

**    ProgressDemo.pro文件**

QT       += core gui
    
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    
    TARGET = ProgressDemo
    TEMPLATE = app
    
    
    SOURCES += main.cpp\
            mainwindow.cpp
    
    HEADERS  += mainwindow.h
    
    FORMS    += mainwindow.ui

**    mainwindow.h文件**

#ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private slots:
        void on_horizontalSlider_valueChanged(int value);
    
    private:
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H

**    main.cpp文件**

#include "mainwindow.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        MainWindow w;
        w.show();
    
        return a.exec();
    }

**    mainwindow.cpp文件**

#include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        //ui->progressBar->setMinimum(0);//设置进度条的最小值
        //ui->progressBar->setMaximum(100);//设置进度条的最大值
        ui->progressBar->setValue(0);//设置进度条的当前值
    
        ui->horizontalSlider->setMinimum(0);//设置水平滑动条的最小值
        ui->horizontalSlider->setMaximum(100);//设置水平滑动条的最大值
        ui->horizontalSlider->setValue(0);//设置水平滑动条的当前值
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    void MainWindow::on_horizontalSlider_valueChanged(int value)//当滑动条的值改变时 执行此槽函数
    {
        //value是滑动条的值，也可以这样获取int value = ui->horizontalSlider->value();//获取水平滑动条的值
        ui->progressBar->setValue(value);//设置进度条的值
    }

三、例子2 滑动条例子---调色板

3.1 效果

取色器：鼠标左键或右键单击，取色完成。

![20190127134138570.gif][]

3.2 工程结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1][]

布局：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 2][]

3.3 源文件

SliderDemo.pro文件

QT       += core gui
    RC_ICONS += img/palette.ico
    
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    
    TARGET = SliderDemo
    TEMPLATE = app
    
    
    
    SOURCES += main.cpp\
            mainwindow.cpp
    
    HEADERS  += mainwindow.h
    
    FORMS    += mainwindow.ui
    
    RESOURCES += \
        res.qrc

mainwindow.h文件

#ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
        int m_r;//红色的值
        int m_g;//绿色的值
        int m_b;//蓝色的值
        QPixmap m_pixmap;//全屏截图，截图频繁会单只鼠标卡顿
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
        bool m_isPicColor;//指示当前是否进行屏幕取色
        void setColor();//设置颜色
        static void PickupColor(int x, int y);//获取鼠标位置的1个像素 x和y是鼠标的位置
        static MainWindow* st_this;//静态的对象指针，用来设置成员值（设置颜色）
    
    private slots://槽函数
        void on_horizontalSliderR_valueChanged(int value);//红色滑动条的值改变了就会调用
    
        void on_horizontalSliderG_valueChanged(int value);//绿色滑动条的值改变了就会调用
    
        void on_horizontalSliderB_valueChanged(int value);//蓝色滑动条的值改变了就会调用
    
        void on_btnEditColor_clicked();//编辑颜色 按钮 的响应函数
    
        void on_spinBoxR_valueChanged(int value);//红色spinBox数值微调框的值改变了就会调用
    
        void on_spinBoxG_valueChanged(int value);//绿色spinBox数值微调框的值改变了就会调用
    
        void on_spinBoxB_valueChanged(int value);//蓝色spinBox数值微调框的值改变了就会调用
    
        void on_btnPickupColor_clicked();//取色
    
    private:
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H

main.cpp文件

mainwindow.cpp文件

#include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QColorDialog>//颜色对话框
    #include <QMouseEvent>//鼠标事件
    #include <QPoint>//点（坐标位置）
    #include <QDebug>
    #include <QScreen>
    #include <Windows.h>
    
    MainWindow* MainWindow::st_this = nullptr;//初始化静态指针
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        this->setFixedSize(this->width(), this->height());//固定窗口大小
    
        st_this = this;
        m_r = 255;//初始化颜色值
        m_g = 255;
        m_b = 255;
        this->setWindowIcon(QIcon(":/images/img/palette.ico"));//设置可执行程序图标
        ui->centralWidget->setMouseTracking(true);//开启鼠标实时追踪，用来实时的获取鼠标的位置
        setMouseTracking(true);//开启鼠标实时追踪，为了节省资源默认状态下是要鼠标按下才捕捉
        m_isPicColor = false;
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    void MainWindow::setColor()//设置颜色
    {
        //设置label的颜色
        QString style = QString("background-color: rgb(%1, %2, %3);").arg(m_r).arg(m_g).arg(m_b);
        ui->labelColor->setStyleSheet(style);
    
        //获取RGB十六进制形式
        QString strRHex = QString::number(m_r, 16).toUpper();//将r的十六进制形式 转为字符串形式(大写)
        QString strGHex = QString::number(m_g, 16).toUpper();
        QString strBHex = QString::number(m_b, 16).toUpper();
    
        //设置Hex这一列标签
        ui->labelRHex->setText("0x" + strRHex);
        ui->labelGHex->setText("0x" + strGHex);
        ui->labelBHex->setText("0x" + strBHex);
    
        //将颜色值设置到lineEdit，可以直接复制颜色值
        ui->lineEditColorValue->setText(QString("RGB(%1,%2,%3),HEX(0x%4%5%6)").arg(m_r).arg(m_g).arg(m_b).arg(strRHex).arg(strGHex).arg(strBHex));
    }
    
    void MainWindow::on_horizontalSliderR_valueChanged(int value)//滑动条的值发生变化时执行
    {
        m_r = value;
        ui->spinBoxR->setValue(m_r);//同步更新设置spinBox数值微调框
        setColor();
    }
    
    void MainWindow::on_horizontalSliderG_valueChanged(int value)
    {
        m_g = value;
        ui->spinBoxG->setValue(m_g);//同步更新设置spinBox数值微调框
        setColor();
    }
    
    void MainWindow::on_horizontalSliderB_valueChanged(int value)
    {
        m_b = value;
        ui->spinBoxB->setValue(m_b);//同步更新设置spinBox数值微调框
        setColor();
    }
    
    void MainWindow::on_btnEditColor_clicked()//编辑颜色按钮
    {
        QColor color =  QColorDialog::getColor(Qt::white, this, "请选择颜色");//打开颜色对话框
        ui->horizontalSliderR->setValue(color.red());//设置红色滑动条的值
        ui->horizontalSliderG->setValue(color.green());//设置绿色滑动条的值
        ui->horizontalSliderB->setValue(color.blue());//设置蓝色滑动条的值
    }
    
    void MainWindow::on_spinBoxR_valueChanged(int value)//数值微调控件的值发生变化时执行
    {
        ui->horizontalSliderR->setValue(value);//同步更新滑动条的值，这里不用调用setColor()，滑动条的值改变了就会调用,并设置m_r,m_g,m_b
    }
    
    void MainWindow::on_spinBoxG_valueChanged(int value)
    {
        ui->horizontalSliderG->setValue(value);//同步更新滑动条的值，这里不用调用setColor，滑动条的值改变了就会调用
    }
    
    void MainWindow::on_spinBoxB_valueChanged(int value)
    {
        ui->horizontalSliderB->setValue(value);//同步更新滑动条的值，这里不用调用setColor，滑动条的值改变了就会调用
    }
    
    void MainWindow::PickupColor(int x, int y)//获取鼠标位置的1个像素 x和y是鼠标的位置
    {
        QRgb rgb = MainWindow::st_this->m_pixmap.toImage().pixel(x, y);//获取Pixmap指定位置的像素的rgb数据，这个Pixmap只有一个像素，其实获取的就是鼠标位置的像素
    
        //设置label的颜色
        QString style = QString("background-color: rgb(%1, %2, %3);").arg(qRed(rgb)).arg(qGreen(rgb)).arg(qBlue(rgb));
        MainWindow::st_this->ui->labelColor->setStyleSheet(style);
        if(!MainWindow::st_this->m_isPicColor)//取色结束才调整控件,不然可能导致鼠标卡顿
        {
            MainWindow::st_this->on_horizontalSliderR_valueChanged( qRed(rgb) );
            MainWindow::st_this->on_horizontalSliderG_valueChanged( qGreen(rgb) );
            MainWindow::st_this->on_horizontalSliderB_valueChanged( qBlue(rgb) );
        }
    
    }
    
    //实现在窗口之外也能捕获鼠标
    HHOOK mouseHook = NULL;//鼠标钩子
    LRESULT CALLBACK mouseProc(int nCode,WPARAM wParam,LPARAM lParam )
    {
        if(nCode == HC_ACTION) //当nCode等于HC_ACTION时，lParam参数是指向EVENTMSG结构的指针，该结构包含有关从系统队列中删除的消息的信息
        {
            MSLLHOOKSTRUCT *mouse = (MSLLHOOKSTRUCT *) lParam;//鼠标相关信息
            //相关类型在winuser.h
            if(wParam == WM_MOUSEMOVE)//鼠标移动
            {
                MainWindow::PickupColor(mouse->pt.x, mouse->pt.y);//移动显示当前取到的颜色
                //return false;//返回false，继续分发事件。返回真，即屏蔽掉这些事件，鼠标操作受到限制
    
            }//鼠标右键按下 或 鼠标左键按下 取色完成
            else if(wParam == WM_RBUTTONDOWN || wParam == WM_LBUTTONDOWN)
            {
                //卸载鼠标钩子
                UnhookWindowsHookEx(mouseHook);
    
                MainWindow::st_this->m_isPicColor = false;//取色结束
                MainWindow::PickupColor(mouse->pt.x, mouse->pt.y);//设置最后取色，包括滑动条控件的值
            }
        }
        return CallNextHookEx(mouseHook,nCode,wParam,lParam);//否则，如果返回给下一个钩子子程处理
    }
    
    void MainWindow::on_btnPickupColor_clicked()//拾取颜色（屏幕取色）
    {
        if(!m_isPicColor)//准备捕获全局鼠标动作，开启屏幕取色
        {
            //注册鼠标钩子
            mouseHook = SetWindowsHookEx( WH_MOUSE_LL,mouseProc,GetModuleHandle(NULL),0);
        }
        m_isPicColor = true;//进行屏幕取色
    
        //截取全屏图像
        QScreen *screen = QGuiApplication::primaryScreen();
        m_pixmap = screen->grabWindow(0);//0代表桌面
        qDebug()<<"开启屏幕取色";
    }

四、总结

4.1 设置应用图标

4.1.1  准备.ico文件, 并添加到资源文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 3][]

4.1.2  在.pro文件添加：RC\_ICONS += img/palette.ico     （注意实际的路径）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 4][]

4.1.3 设置图标

方式1：代码方式设置：

this->setWindowIcon(QIcon(":/images/img/palette.ico"));//设置可执行程序图标

方式2：在属性栏中直接设置

![20181228205318741.gif][]

4.2 监测全局鼠标事件（HOOK方式）

//实现在窗口之外也能捕获鼠标         头文件Windows.h
    HHOOK mouseHook = NULL;//鼠标钩子
    LRESULT CALLBACK mouseProc(int nCode,WPARAM wParam,LPARAM lParam )
    {
        if(nCode == HC_ACTION) //当nCode等于HC_ACTION时，lParam参数是指向EVENTMSG结构的指针，该结构包含有关从系统队列中删除的消息的信息
        {
            MSLLHOOKSTRUCT *mouse = (MSLLHOOKSTRUCT *) lParam;//鼠标相关信息
            //相关类型在winuser.h
            if(wParam == WM_MOUSEMOVE)//鼠标移动
            {
                MainWindow::PickupColor(mouse->pt.x, mouse->pt.y);//移动显示当前取到的颜色
                //return false;//返回false，继续分发事件。返回真，即屏蔽掉这些事件，鼠标操作受到限制
    
            }//鼠标右键按下 或 鼠标左键按下 取色完成
            else if(wParam == WM_RBUTTONDOWN || wParam == WM_LBUTTONDOWN)
            {
                //卸载鼠标钩子
                UnhookWindowsHookEx(mouseHook);
    
                MainWindow::st_this->m_isPicColor = false;//取色结束
                MainWindow::PickupColor(mouse->pt.x, mouse->pt.y);//设置最后取色，包括滑动条控件的值
            }
        }
        return CallNextHookEx(mouseHook,nCode,wParam,lParam);//否则，如果返回给下一个钩子子程处理
    }

4.3 实现取色器：取鼠标位置的像素信息

取鼠标位置的像素信息==》取全屏图片的指定位置像素的rgb信息 （鼠标的位置==》指定的位置）

QRgb rgb = m_pixmap.toImage().pixel(x, y);//获取Pixmap指定位置的像素的rgb数据，这个Pixmap只有一个像素，其实获取的就是鼠标位置的像素

截全屏幕的图片

QScreen *screen = QGuiApplication::primaryScreen();
    m_pixmap = screen->grabWindow(0);//0代表桌面

[20181228173615166.gif]: /images/20220402/e8635bda62024083851798addef30e40.png
[20181228181131554.png]: /images/20220402/48e488511928461cbec3010129afc65c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70]: /images/20220402/09528fc5526a4fada3af4211b9887ca0.png
[20190127134138570.gif]: /images/20220402/30b09579ccc44b728d461d9e456c8886.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 1]: /images/20220402/77db589521a545a2978985cd51422c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 2]: /images/20220402/9ba0a5083c494af287572b830b263bf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 3]: /images/20220402/a4b9786703fe44629cb2b2b3c9f3be32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmZlaWJ1eWk_size_16_color_FFFFFF_t_70 4]: /images/20220402/9f4ad674b4de4c4e8915d0d052e1a0ad.png
[20181228205318741.gif]: /images/20220402/5be8fc3298ee49b9b20457ff80f4078c.png