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

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

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";
    }
}

4. 使用方法

老手看源代码应该就知道怎么用了,但为了照顾到小白同学,这边详细介绍一下使用方法:如何在自己的QT项目中添加这个功能

4.1 新建文件

在项目上右键添加h/cpp新文件,名字为 myQPushButton,然后点击下一步确定

4.2 复制代码

3. 代码实现 中 myQPushButton.h  myQPushButton.cpp 代码分别复制到你刚刚新建的文件下,如下所示

4.2 按钮提升

首先添加类,如下所示,在已有的按钮上右键提升为,在新窗口界面添加提升的类名称(记得头文件一定不要写错),添加之后在选择类名点击提升即可。最后别忘了调整按钮大小,让按钮大一点。

4.3 成果展示

然后运行你就可以把图片拖到按钮里啦!

5. 存在的问题和温馨提示

如果想给按钮赋底图,请用 StyleSheet 的 background-image 或者 border-image 方式。

如果只是想拖拽图片到 QT 的 GUI 中的一个容器内而不要求可点击,建议使用 QLabel 组件

本方法使用的 Pixmap 缩放会存在图像失真问题,所以图像不会有原来那么清晰!

### 回答1: Qt Image Viewer是基于Qt框架实现的图片浏览器。Qt是跨平台的C++应用程序开发框架,它提供了丰富的图形界面控件和功能库,适合用于创建各种类型的应用程序。 在Qt Image Viewer中,我们可以使用QImage类来加载和处理图片。QImage类提供了许多用于处理图片的函数,例如加载图片缩放、旋转等等。 在实现图片浏览器的时候,我们可以使用QFileDialog类来打开图片文件。用户可以通过该类的getOpenFileName函数选择要打开的图片文件,并将文件路径传递给QImage类进行加载。 为了显示图片,我们可以使用QLabel类作为图片的容器。在QLabel中,我们可以使用setPixmap函数将QImage对象转换为QPixmap,并使用setScaledContents函数将图片自适应地放置在容器中。 为了实现浏览多张图片的功能,我们可以在窗口中添加按钮或者菜单栏来供用户选择前一张或者后一张图片。当用户点击这些按钮时,我们可以在加载图片之前判断是否已经加载了一张图片,如果已经加载,则根据用户的操作加载前一张或者后一张图片。 此外,我们还可以添加一些其他的功能,如缩放图片、旋转图片、保存图片等等。这些功能可以通过在窗口中添加一些按钮或者菜单项来实现,并与对应的QImage函数进行连接。 总的来说,Qt Image Viewer通过使用Qt框架提供的函数和控件,可以实现一个简单但功能齐全的图片浏览器。用户可以方便地打开、查看和操作图片。 ### 回答2: Qt是一款功能强大的跨平台应用程序开发框架,它提供了丰富的类库和工具,可用于开发各种类型的应用程序,包括图片浏览器。 在Qt中,可以使用QImage来加载和显示图片。首先,我们可以通过QFileDialog类选择要显示的图片文件,然后使用QImage加载该文件。加载完成后,可以将QImage转换为QPixmap,以便在窗口中显示。我们可以使用QLabel或QGraphicsView来显示QPixmap,从而实现图片浏览器的界面。 为了能够浏览不同图片,我们可以使用QPushButton或QAction添加上一张和下一张图片的功能。当点击这些按钮时,可以切换当前显示的图片。另外,我们还可以使用QSlider或QScrollBar添加缩放功能,以实现放大和缩小图片的效果。 此外,为了方便用户对图片进行查看和编辑,我们可以将图片浏览器与其他功能结合起来。例如,我们可以添加图像旋转、翻转、裁剪等操作的功能按钮,以及添加保存图片的功能按钮。 最后,为了提高用户体验,我们还可以添加一些便捷的功能,如拖拽图片到窗口中自动加载,支持多种图片格式,添加全屏显示的功能等。 综上所述,使用Qt的QImage和QPixmap,以及QLabel、QGraphicsView、QPushButton、QAction、QSlider等类,我们可以很方便地实现一个简单但功能完善的图片浏览器。通过选取和加载图片文件,并提供方便的浏览和编辑操作,可以满足用户对图片浏览器的基本需求。 ### 回答3: 在使用Qt来实现图片浏览器时,我们可以使用Qt的QImage和QPixmap类来处理和显示图片。 首先,我们需要创建一个主窗口,在主窗口中添加一个QGraphicsView作为显示图片的画布。然后,我们可以通过QFileDialog来打开一个图片文件,获取图片的路径。 接下来,我们可以使用QImage类来读取图片的数据,并将其转换为QPixmap格式以便显示在QGraphicsView中。我们可以通过QGraphicsScene来管理QGraphicsView中的显示内容,将QPixmap添加到QGraphicsScene中,并将场景关联到QGraphicsView上。 为了实现图片的浏览功能,我们可以在主窗口中添加两个按钮,一个是“上一张”,一个是“下一张”。点击这些按钮时,我们可以通过改变图片的路径并重新加载图片来实现图片的切换。 此外,我们还可以添加其他功能,例如放大缩小图片、旋转图片等,可以使用QTransform类来实现这些功能。 最后,我们还可以使用QScrollBar来实现图片的滚动效果,当图片大小超过QGraphicsView的大小时,可以通过滚动条来查看完整的图片内容。 总结一下,使用Qt的QImage和QPixmap类结合QGraphicsView和QGraphicsScene,我们可以方便地实现一个简单的图片浏览器,并添加功能如图片切换、放大缩小、旋转和滚动等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值