【QT学习】制作一个简单的图片查看器（完整源码）

• 📢欢迎各位读者：点赞 👍 收藏 ⭐留言 📝
• 📢博客主页：https://blog.youkuaiyun.com/qq_59134387😀
• 📢原创不易，转载请标明出处；如有错误，敬请指正批评！💦
• 📢我不去想是否能够成功，既然选择了远方，便只顾风雨兼程！✨

---

前言

   本篇，作者将介绍如何使用QT制作一个简单的图片查看器，包含图片的移动和缩放功能。

---

一、实现效果

• 通过控制鼠标滚轮，对图片进行缩放；按下鼠标左键拖动图片，可以实现图片移动。

二、需求分析

• 如何在窗口中显示本地文件图片？

• 如何在滚动鼠标滚轮时，实现图片的缩放？

• 如何在按下鼠标左键时，拖动图片进行移动？

三、解决方案

• 在窗口中创建一个与窗口等大的标签，通过把图片插入标签中完成图片在窗口中显示。

  （1）使用QLabel类创建标签，并初始化标签大小与窗口等大

    this->picLabel = new QLabel(this);
    this->picLabel->resize(this->width(),this->height());

  （2）使用setPixmap函数将本地图片插入标签，并自适应标签大小

    this->picLabel->setPixmap(QPixmap("./picture.jpg"));
    this->picLabel->setScaledContents(true);

• 重写鼠标滚轮事件，当鼠标滚轮向前时，图片放大；鼠标滚轮向后时，图片缩小。

  （1）根据跟轮滚动角度，判断滚轮向前或向后滚动

	int mouseAngle = event->delta();

  （2）在鼠标滚轮事件中，移动标签图片；并在绘制事件中重置标签图片大小

	this->maxLevel++;
    this->picLabel->move(this->mousePoint.x()-(this->width()+200*this->maxLevel)*this->xLevel,
                                   this->mousePoint.y()-(this->width()+200*this->maxLevel)/8*5*this->yLevel);
    this->picLabel->resize(this->width()+200*this->maxLevel,(this->width()+200*this->maxLevel)/8*5);

• 重写鼠标按下事件和鼠标移动事件。当鼠标按下时，保存按下时鼠标当前位置坐标；鼠标移动时，通过鼠标当前位置坐标和鼠标按下位置坐标的差值计算拖动图片进行移动。

void picscale::mousePressEvent(QMouseEvent *event)
{
    this->mousePoint = event->pos();
}

void picscale::mouseMoveEvent(QMouseEvent *event)
{
    //鼠标按下左键并移动
    if (event->buttons() == Qt::LeftButton)
    {
        if((this->picLabel->pos()+event->pos()-this->mousePoint).x()<0 &&
                (this->picLabel->pos()+event->pos()-this->mousePoint).y()<0 &&
                ((this->picLabel->pos()+event->pos()-this->mousePoint).x()+this->picLabel->width())>this->width() &&
                ((this->picLabel->pos()+event->pos()-this->mousePoint).y()+this->picLabel->height())>this->height())
        {
            this->picLabel->move(this->picLabel->pos()+event->pos()-this->mousePoint);
            this->mousePoint = event->pos();
        }
    }
}

四、完整源码

1.main.cpp文件

#include <QApplication>
#include "picscale.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    picscale w;
    w.show();

    return a.exec();
}

2.picscale.h文件

#ifndef PICSCALE_H
#define PICSCALE_H

#include <QLabel>
#include <QPoint>
#include <QWidget>
#include <QMouseEvent>
#include <QPaintEvent>

class picscale : public QWidget
{
    Q_OBJECT
public:
    explicit picscale(QWidget *parent = 0);
    QLabel *picLabel;
    int maxLevel;
    double xLevel;
    double yLevel;
    QPoint mousePoint;
    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void wheelEvent(QWheelEvent *event);
signals:

public slots:
};

#endif // PICSCALE_H

3.picscale.cpp文件

#include <QDebug>
#include "picscale.h"

picscale::picscale(QWidget *parent) : QWidget(parent)
{
    this->setFixedSize(800,500);

    this->maxLevel = 0;
    this->xLevel = 0;
    this->yLevel = 0;

    this->picLabel = new QLabel(this);
    this->picLabel->resize(this->width(),this->height());
    this->picLabel->setPixmap(QPixmap("./picture.jpg"));
    this->picLabel->setScaledContents(true);
}

void picscale::paintEvent(QPaintEvent *event)
{
    this->picLabel->resize(this->width()+200*this->maxLevel,(this->width()+200*this->maxLevel)/8*5);
}

void picscale::mousePressEvent(QMouseEvent *event)
{
    this->mousePoint = event->pos();
    qDebug() << this->picLabel->pos();
}

void picscale::mouseMoveEvent(QMouseEvent *event)
{
    //鼠标按下左键并移动
    if (event->buttons() == Qt::LeftButton)
    {
        if((this->picLabel->pos()+event->pos()-this->mousePoint).x()<0 &&
                (this->picLabel->pos()+event->pos()-this->mousePoint).y()<0 &&
                ((this->picLabel->pos()+event->pos()-this->mousePoint).x()+this->picLabel->width())>this->width() &&
                ((this->picLabel->pos()+event->pos()-this->mousePoint).y()+this->picLabel->height())>this->height())
        {
            this->picLabel->move(this->picLabel->pos()+event->pos()-this->mousePoint);
            this->mousePoint = event->pos();
        }
    }
}

void picscale::wheelEvent(QWheelEvent *event)
{
    this->mousePoint = event->pos();


      //放大缩小时，鼠标位置的像素点不移动
//    this->xLevel = (double)(this->mousePoint.x()-this->picLabel->x())/(double)this->picLabel->width();
//    this->yLevel = (double)(this->mousePoint.y()-this->picLabel->y())/(double)(this->picLabel->width()/8*5);

    //放大缩小时，图片始终位于窗口内
    this->xLevel = (double)this->mousePoint.x()/(double)this->width();
    this->yLevel = (double)this->mousePoint.y()/(double)(this->width()/8*5);

    qDebug() << this->xLevel ;
    qDebug() << this->yLevel ;

    if(event->delta()>0)
    {
        qDebug() << "向前滚动"<<event->delta();
        if(this->maxLevel < 10)
        {
            this->maxLevel++;
            this->picLabel->move(this->mousePoint.x()-(this->width()+200*this->maxLevel)*this->xLevel,
                                   this->mousePoint.y()-(this->width()+200*this->maxLevel)/8*5*this->yLevel);
        }
    }
    else
    {
        qDebug() << "向后滚动"<<event->delta();
        if(this->maxLevel > 0)
        {
            this->maxLevel--;
            this->picLabel->move(this->mousePoint.x()-(this->width()+200*this->maxLevel)*this->xLevel,
                                   this->mousePoint.y()-(this->width()+200*this->maxLevel)/8*5*this->yLevel);
        }
    }
}

---

总结

   以上就是【QT学习】制作一个简单的图片查看器（完整源码）的所有内容，希望大家阅读后都能有所收获！原创不易，转载请标明出处，若文章出现有误之处，欢迎读者留言指正批评！