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 缩放会存在图像失真问题,所以图像不会有原来那么清晰!