QT QPushButton 添加拖拽图片进入并保持比例自适应缩放

原创于 2024-04-13 16:47:03 发布 · 1.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言

本文介绍了如何在QT中通过继承QPushButton并重写相关事件处理函数，实现在QPushButton中支持图片拖拽并保持原比例缩放的功能，同时提供了使用方法、存在的问题和替代方案。

1. 前言

这算是一个比较偏门的想法，想要拖拽图片进入QPushButton按钮，并且实现图片保持原比例的情况下按自适应缩放，具体实现效果如下GIF所示。

注意，你需要一定的基础知识，比如：① QPushButton继承重写，② QPushButton按钮提升

2. 实现原理

如需要代码实现建议直接跳转至：3. 代码实现

通过继承QPushButton，重写 void dragEnterEvent(QDragEnterEvent *event) 和 void dropEvent(QDropEvent *event) 函数实现图像可拖拽放入和图像放下

通过重写QPushButton其中的 void paintEvent(QPaintEvent *) 函数实现图像的等比例自适应缩放

3. 代码实现

myQPushButton.h

#ifndef MYQPUSHBUTTON_H
#define MYQPUSHBUTTON_H

#include <QPushButton>
#include <QString>

class myQPushButton : public QPushButton
{
    Q_OBJECT
public:
    myQPushButton(QWidget *parent);
    QString filePath;

protected:
    void dragEnterEvent(QDragEnterEvent *event) Q_DECL_OVERRIDE;
    void dropEvent(QDropEvent *event) Q_DECL_OVERRIDE;
    void paintEvent(QPaintEvent *) Q_DECL_OVERRIDE; //重写绘画函数
};

#endif // MYQPUSHBUTTON_H

myQPushButton.cpp

#include "myQPushButton.h"

#include <QFileDialog>
#include <QDragEnterEvent>
#include <QDebug>
#include <QMimeData>
#include <QPainter>

myQPushButton::myQPushButton(QWidget *parent) : QPushButton(parent){
    QPushButton::setAcceptDrops(true);
}

void myQPushButton::dragEnterEvent(QDragEnterEvent *event)
{
    event->acceptProposedAction();
}

void myQPushButton::dropEvent(QDropEvent *event)
{
    // 获取地址
    QList<QUrl> urls = event->mimeData()->urls();
    if(urls.empty())
        return;

    // 获取图片地址
    QString fileName = urls.first().toLocalFile();
    if(fileName.isEmpty())
        return;

    qDebug() << fileName;

    // 设置图片（这是图片放上来后，删除按钮上的文字）
    this->QPushButton::setText("");

    // 设置路径
    filePath = fileName;
}

void myQPushButton::paintEvent(QPaintEvent *paint)
{
    // 调用父类的 paintEvent
    QPushButton::paintEvent(paint);

    // 如果图片地址不为空，则进行绘画
    if (filePath != "") {

        // 获取图片和绘画函数
        QPixmap pixmap(filePath);
        QPainter painter(this);

        // 根据组件大小缩放图片（这里减去10是考虑了按钮的边框）
        QSize scaleSize(this->size().width() - 10, this->size().height() - 10);
        pixmap = pixmap.scaled(scaleSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);

        // 根据图片的宽高和QLabel的宽高计算绘图的矩形区域和坐标
        QRect rectPic(0, 0, pixmap.width(), pixmap.height());
        int X = (this->width() - pixmap.width()) / 2;
        int Y = (this->height() - pixmap.height()) / 2;
        rectPic.setX(X);
        rectPic.setY(Y);

        rectPic.setWidth(pixmap.size().width());
        rectPic.setHeight(pixmap.size().height());

        // 绘制图片
        painter.drawImage(rectPic, pixmap.toImage());
    }
    else{
        qDebug() << "pix is Null";
    }
}