20.QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)

最新推荐文章于 2024-03-31 23:42:22 发布
原创 最新推荐文章于 2024-03-31 23:42:22 发布 · 662 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #qt #qt5 #数据可视化 #webgl

本文介绍了一个使用QT实现的图片浏览器，支持图片放大、缩小、移动等功能，并详细解释了如何通过QPainter绘制平铺显示的图片。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

通过 QPainter 绘画实现,以本地图片985*740为例

实现原理

主要通过以下函数实现:

void QPainter::drawTiledPixmap ( int x, int y, int w int h const QPixmap & pixmap, int sx = 0, int sy = 0 );
　　　　　　//平铺显示pixmap
　　　　　　//x y w h :表示绘画区域
　　　　　　//sx  sy  :表示Qpixmap绘画起始位置

只要算出x y w h sx sy就能实现超出窗口不显示的效果

举个例子,如下图所示,居中显示1200*1200时：

当图片左偏移600时,也就是offset=-600时,则只能在窗口上显示一半的图片：

2020-11-25更新

由于本笔记是当时才学QT时写的,所以图片都是指定的某资源,而不是通过QFileDialog来打开文件,如下图所示:

本用来记笔记给自己看的,结果很多参考代码的人,直接复制代码,然后忘记改图片资源,效果展示不出来,以为是代码问题.

所以更新,界面如下所示,添加了两个button,还原100%显示大小、打开文件按钮:

代码实现(直接复制粘贴到widget界面类即可)

widget.h:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QtGui>
#include <QLabel>
#include <QPushButton>
#include <QComboBox>
#include <QApplication>
#include <QFileDialog>
#include <QImage>
class Widget : public QWidget
{
    Q_OBJECT

private :
    QPixmap  pix;
    QPixmap  crtPix;
    int action;          //动作(放大,缩小,移动...)
    int pixW;            //图片宽
    int pixH;            //图片高

    QRect Paint;         //绘画区域

    QImage image;        //打开的图片


    float ratio;              //缩放比例
    QPoint offset;           //一次的图片偏移值
    QPoint Alloffset;          //总偏移
    QLabel label;

    QPushButton  BigButton;
    QPushButton  LittleButton;
    QPushButton  LiftButton;
    QPushButton  RightButton;
    QPushButton  UpButton;
    QPushButton  DownButton;
    QPushButton  ResetButton;
    QPushButton  OpenButton;

    void AddComboItem(QComboBox* cmbo);
    bool event(QEvent * event);
    void wheelEvent(QWheelEvent* e);     //鼠标滑轮事件
private slots:
    void    onUpClicked();
    void    onDownClicked();
    void    onResetClicked();
    void    OnLiftClicked();
    void    OnRightClicked();
    void    onLittleClicked();
    void    onBigClicked();

    void    onOpenClicked();

   void paintEvent(QPaintEvent *event);
public:
    explicit Widget();

    enum  Type {
        None          = 0,
        Amplification ,
        Shrink,
        Lift,
        Right,
        Up,
        Down,
        Move,
        Reset
    };

};
#endif // WIDGET_H

widget.cpp:

#include "widget.h"

Widget::Widget():
    Paint(10,10,810,810),
    BigButton("放大",this),
    LittleButton("缩小",this),
    LiftButton("向左",this),
    RightButton("向右",this),
    UpButton("向上",this),
    DownButton("向下",this),
    ResetButton("还原",this),
    OpenButton("打开文件",this),
    Alloffset(0,0),
    label("100%",this)
{
    ratio= 1.0;             //初始化图片缩放比例
    action = Widget::None;




    BigButton.setGeometry(822,10,60,25);
    connect(&BigButton,SIGNAL(clicked()),this,SLOT(onBigClicked()));

    LittleButton.setGeometry(822,40,60,25);
    connect(&LittleButton,SIGNAL(clicked()),this,SLOT(onLittleClicked()));

    LiftButton.setGeometry(822,70,60,25);
    connect(&LiftButton,SIGNAL(clicked()),this,SLOT(OnLiftClicked()));
    RightButton.setGeometry(822,100,60,25);
    connect(&RightButton,SIGNAL(clicked()),this,SLOT(OnRightClicked()));
    UpButton.setGeometry(822,130,60,25);
    connect(&UpButton,SIGNAL(clicked()),this,SLOT(onUpClicked()));
    DownButton.setGeometry(822,160,60,25);
    connect(&DownButton,SIGNAL(clicked()),this,SLOT(onDownClicked()));


    ResetButton.setGeometry(822,190,60,25);
    connect(&ResetButton,SIGNAL(clicked()),this,SLOT(onResetClicked()));

    OpenButton.setGeometry(822,220,60,25);
    connect(&OpenButton,SIGNAL(clicked()),this,SLOT(onOpenClicked()));

    label.move(840,260);
    resize(890,850);

    this->setWindowTitle("图片浏览器(请打开文件)");
}

bool Widget::event(QEvent * event)
{
    static bool press=false;
    static QPoint PreDot;

    if(event->type() == QEvent::MouseButtonPress )
    {
           QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);

           //判断鼠标是否是左键按下,且鼠标位置是否在绘画区域
           if(mouse->button()==Qt::LeftButton &&Paint.contains(mouse->pos()))
           {
               press=true;
               QApplication::setOverrideCursor(Qt::OpenHandCursor); //设置鼠标样式

               PreDot = mouse->pos();
           }

    }
    else if(event->type() == QEvent::MouseButtonRelease)
    {
        QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);

        //判断鼠标是否是左键释放,且之前是在绘画区域
        if(mouse->button()==Qt::LeftButton && press )
        {
            QApplication::setOverrideCursor(Qt::ArrowCursor); //改回鼠标样式
            press=false;
        }
    }

     if(event->type() == QEvent::MouseMove)              //移动图片
     {
          if(press)
         {
            QMouseEvent *mouse = dynamic_cast<QMouseEvent* >(event);

            offset.setX(mouse->x() - PreDot.x());
            offset.setY(mouse->y() - PreDot.y());
            PreDot = mouse->pos();
            action = Widget::Move;

            this->update();
         }
     }
    return QWidget::event(event);
}

void Widget::wheelEvent(QWheelEvent* event)     //鼠标滑轮事件
{
 if (event->delta()>0) {      //上滑,缩小

    action=Widget::Shrink;
    this->update();
 } else {                    //下滑,放大
     action=Widget::Amplification;
     this->update();
 }

 event->accept();
}



void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::SmoothPixmapTransform|QPainter::Antialiasing|QPainter::TextAntialiasing);
    painter.drawRect(Paint.x()-1,Paint.y()-1,Paint.width()+1,Paint.height()+1); //画框

    if(image.isNull())
    {
     return;
    }

    int NowW = ratio *pixW;
    int NowH = ratio *pixH;

    if(action==Widget::Shrink)           //缩小
    {
          ratio-=0.05*ratio;
        if(ratio<0.018)
          ratio = 0.01;

        /*显示比例*/
        QString str;
        str.sprintf("%.0f%",ratio*100);
        label.setText(str) ;
        qDebug()<<"缩小:"<<ratio;
    }
    else  if(action==Widget::Amplification)           //放大
    {

         ratio+=0.05*ratio;
       if(ratio>4.5)
         ratio = 5.000;

        /*显示比例*/
        QString str;
        str.sprintf("%.0f%",ratio*100);
        label.setText(str);
        qDebug()<<"放大:"<<ratio;
    }


    if(action==Widget::Amplification || action==Widget::Shrink || action==Widget::Reset)      //更新图片
    {
      NowW = ratio *pixW;
      NowH = ratio *pixH;


      crtPix= pix.scaled(NowW, NowH,Qt::KeepAspectRatio,Qt::SmoothTransformation); //重新装载

      action=Widget::None;
    }

    if(action==Widget::Move)                    //移动
    {
        int offsetx=Alloffset.x()+offset.x();
        Alloffset.setX(offsetx);

        int offsety=Alloffset.y()+offset.y();
        Alloffset.setY(offsety);
        action=Widget::None;
    }

    if(abs(Alloffset.x())>=(Paint.width()/2 + NowW/2 -10))    //限制X偏移值
    {
        if(Alloffset.x()>0)
            Alloffset.setX(Paint.width()/2 + NowW/2 -10);
        else
         Alloffset.setX(-Paint.width()/2 + -NowW/2 +10);

    }
    if(abs(Alloffset.y())>=(Paint.height()/2 + NowH/2 -10))    //限制Y偏移值
    {
        if(Alloffset.y()>0)
            Alloffset.setY(Paint.height()/2 + NowH/2 -10);
        else
         Alloffset.setY(-Paint.height()/2 + -NowH/2 +10);

    }

    int x = Paint.width()/2 + Alloffset.x() -NowW/2;
    if(x<0)
        x=0;

    int y = Paint.height()/2 + Alloffset.y() -NowH/2;
    if(y<0)
        y=0;

    int  sx = NowW/2 - Paint.width()/2 - Alloffset.x();
    if(sx<0)
        sx=0;

    int  sy = NowH/2 - Paint.height()/2 - Alloffset.y();
    if(sy<0)
        sy=0;

    int w =(NowW - sx)>Paint.width()? Paint.width() : (NowW - sx);
    if(w>(Paint.width()-x))
        w = Paint.width()-x;

    int h =(NowH - sy)>Paint.height()? Paint.height() : (NowH - sy);
    if(h>(Paint.height()-y))
        h = Paint.height()-y;



    painter.drawTiledPixmap(x+Paint.x(),y+Paint.y(),w,h,crtPix,sx,sy);             //绘画图形



}

void  Widget::onLittleClicked()
{
  action=Widget::Amplification;
  this->update();
}

void Widget::onOpenClicked()
{


    QString str = QFileDialog::getOpenFileName(this,
                                 "open",
                                 "D:",
                                 "img (*.png *.jpg)");

    if(!str.isNull())
    {


       image.load(str);
       pix = pix.fromImage(image);

       crtPix = pix;
       pixW = image.width();            //图片宽
       pixH = image.height();           //图片高
       qDebug()<<str<<pixW<<pixH;
       this->setWindowTitle("图片浏览器("+str+")");
       onResetClicked();
    }
}

void  Widget::onBigClicked()
{
  action=Widget::Shrink;
  this->update();
}
void Widget::onUpClicked()
{
  action=Widget::Move;
  offset.setX(0);
  offset.setY(-20);

  this->update();
}
void Widget::onDownClicked()
{
  action=Widget::Move;
  offset.setX(0);
  offset.setY(20);
  this->update();
}
void Widget::onResetClicked()
{
  action=Widget::Reset;
  Alloffset.setX(0);
  Alloffset.setY(0);
  ratio = 1.000;
  label.setText("100%");
  this->update();
}
void Widget::OnLiftClicked()
{
  action=Widget::Move;
  offset.setX(-20);
  offset.setY(0);

  this->update();
}
void Widget::OnRightClicked()
{
  action=Widget::Move;
  offset.setX(20) ;
  offset.setY(0) ;

  this->update();
}
【QT开发】图像控件图像QPixmap类详解及实战应用
科技改变人类，技术成就未来
07-02 2656
QPixmap是Qt提供的一个功能强大且灵活的图像控件，通过本篇文章的学习，你应该对QPixmap有了全面的理解，能够在自己的项目中正确使用它。QPixmap在用户界面中帮助你更好地组织和管理图像显示和处理，有助于创建用户友好和高效的界面。
QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置并截图保存
12-22
可自适应显示图片，以鼠标位置为中心进行缩放，按住鼠标左键进行图片拖动，可添加截图方框并截图保存，可载入显示大部分tif格式的图，可显示伪彩，灰度图
Qt中Qlabel 图片拖放显示
xueyinkuangzhan的博客
03-23 656
Qt中Qlabel接受图片拖放 1. 先在ui框中放入label控件，并调至合适大小： 暂时就命名为：label 2. 代码中头文件应包含： #include <QUrl> #include <QList> #include <QtGui/QPixmap> #include <QtGui/QDragEnterEvent> #include <QtGui/QDropEvent> #include <QImage> #include &
在QT中用QLabel显示一张图像及QImage/QPixmap/QBitmap/QPicture
jinchengzhou的专栏
07-23 1541
在QT中用QLabel显示一张图像及QImage/QPixmap/QBitmap/QPicture 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wwwsssZheRen/article/details/77848855 在QT中显示图像，是使用OpenCV联合QT进行机器视觉项目的开发的第一步。首先需要弄清楚的是QT的四个图像...
Qt 图片查看器 支持鼠标缩放大小 拖动位置等
i7891090的博客
11-13 1107
由于工作需要需要编写一个图片查看器，需要支持鼠标滚动缩放大小，鼠标移动图片位置等，由于无法上传gif，截取的gif示例图暂时不上传了，讲一下大概思路 1 鼠标点击移动图片 通过重写鼠标点击事件获取到点位，在鼠标移动事件中进行move操作，在paintEvent中指定绘制起始点即可， 与QDialog 移动操作一样，代码如下 //mousePressEvent void PicSh...
PyQt5的QPushButton怎么设置Pixmap?
willluckysmile的博客
03-31 793
注意： 使用QPushButton设置图片， 图片会使用button的UI， 所以如果想要做幕布之类的， 可以用QLabel， 自己监听鼠标点击事件处理按钮事件。此外，如果您想要设置一个未点击状态的图片和一个点击状态的图片，您可以分别使用。可以包含多种尺寸的图片，这样按钮可以在不同的界面环境中正确显示图标。在这个示例中，我们首先包含了必要的头文件，然后创建了一个。如果您的应用程序需要支持不同尺寸的图标，可以使用。是一个常用的控件，用于创建按钮。方法，并指定图标的尺寸。设置了按钮中图标显示的大小。
qt鼠标悬停图片放大_20.QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
05-25
在mousePressEvent函数和mouseMoveEvent函数中，我们记录了鼠标按下和移动的位置，并根据位置的变化使用centerOn函数调整视图中心，使图片实现拖动效果。 综上所述，通过这种方式，就可以实现图片鼠标缩放和鼠标...
Qt实现图片缩放：QPixmap类的scaled()函数详解
要在Qt用户界面设计中实现图片缩放，熟练掌握QPixmap的scaled()函数及其参数选择至关重要，特别是理解Qt::KeepAspectRatio的作用，这对于创建美观且比例协调的UI界面非常关键。同时，熟悉Qt的整体架构和相关资源，能...
Qt教程：实现图片缩放与Qt框架详解
本文主要介绍了如何使用Qt框架中的QPixmap类来实现图片的缩放，以及Qt的相关知识，包括Qt的用途、特性、优势、系统架构，以及学习Qt的方法和资源。 Qt是一个强大的跨平台C++应用程序开发框架，用于创建图形用户界面...
AttributeError: PySide6.QtGui.QPixmap.scaled(): unsupported keyword 'aspectRatioMode'
最新发布
03-09
好的，我现在遇到了用户提出的问题：在使用PySide6时，调用QPixmap.scaled()方法时出现AttributeError，提示不支持关键字参数'aspectRatioMode'。我需要帮用户解决这个问题。 首先，我需要确认用户使用的PySide6...
QPushButton
陌上人如玉，公子世无双。
05-25 2362
QPixmap pixmap("images/014.jpg"); //在工程文件夹下的编译生成的名字很长的文件夹下建立images文件夹，图片放在该文件夹里即可。 QIcon icon; icon.addPixmap(pixmap); button1=new QPushButton; button1-&gt;setIcon(icon); button2=new...
Qt QPixmap QImage 图片等比例缩放到指定大小
日月清心
11-03 8001
第三个参数也有两种表现形式，分别为Qt::FastTransformation和Qt::SmoothTransformation。第二个参数有两种表现形式，分别为Qt::IgnoreAspectRatio和Qt::KeepAspectRatio。第一个参数代表缩放后的尺寸。
Qt QPushButton详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
07-04 5381
QAbstractButton 类是所有按钮控件类的基类，包含很多通用的按钮功能。QPushButton继承自QAbstractButton，它可以放置文字、图片等。它是最常用的小部件。按(点击)按钮来命令计算机执行某些操作或回答问题。典型的按钮有“确定”、“应用”、“取消”、“关闭”、“是”、“否”和“帮助”。QPushButton 类提供了 3 个构造函数，分别是： parent 参数用于指定父窗口；text 参数用于设置按钮上要显示的文字；icon 参数用于设置按钮上要显示的图标。其他常用方法：常
qt 图片操作
jiang_dlut
10-20 4393
<br />qt显示图片变形<br /><br /> 现在我们来实现在窗口上显示图片，并学习怎样将图片进行平移，缩放，旋转和扭曲。这里我们是利用QPixmap类来实现图片显示的。<br /> 一、利用QPixmap显示图片。<br /> 1.将以前的工程文件夹进行复制备份，我们这里将工程文件夹改名为painter05。（以前已经说过，经常备份工程目录，是个很好的习惯）<br /> 2.在工程文件夹的debug文件夹中新建文件夹，我这里命名为images，用来存放要用的图片。我这里放了一张linux.
Qt实战案例（20）——利用QPixmap实现图片缩放、平移等操作
Wendy的博客
01-12 5725
目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件五、效果演示 一、项目介绍 利用QPixmap实现图片缩放、平移等操作。 二、项目基本配置 新建一个Qt案例，项目名称为“PhotoTest”，基类选择“QWidget”，取消创建UI界面复选框的选中状态，完成项目创建。 三、UI界面设计 无UI界面 四、主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五、效果演示 ...
QT：鼠标移动无外框窗口
qq_40572277的博客
01-14 201
mainwindow.h中： private: void mousePressEvent(QMouseEvent *event); void mouseMoveEvent(QMouseEvent *event); private: QPoint windowPos,mousePos,dPos; mainwindow.cpp中： void MainWindow::mo...
QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
su1041168096的博客
07-19 1万+
通过 QPainter 绘画实现,以本地图片985*740为例 转载地址：https://www.cnblogs.com/lifexy/p/9057046.html 如下图所示: 效果如下所示: 实现原理 主要通过以下函数实现: void QPainter::drawTiledPixmap ( int x, int y, int w int h const QPixmap &a...
QT中的绘图操作
热门推荐
qq_54395977的博客
01-27 1万+
1.QPainter 2D绘图离不开QPainter，可以把QPainter想象成一个画笔，开发人员拿着画笔理论上是可以绘制任何你想要的图形。QPainter 一般在一个部件（widget）重绘事件（PaintEvent ）的处理函数paintEvent ()中进行绘制，首先要创建QPainter 对象（画笔），然后进行图形的绘制 1.1常用函数 drawArc() 弧 drawChord() 弦 drawConvexPolygon() 凸多边形 drawEllipse() 椭圆，注意椭圆是先
Qt4.8.2 QPushButton按钮贴图以及实现按钮的几种常用状态
coderchen
08-10 1万+
一、继承自QPushButton，不改变图片本身，而是通过改变按钮背景的透明度 myPushButton.h #ifndef MYPUSHBUTTON_H #define MYPUSHBUTTON_H #include class myPushButton : public QPushButton { Q_OBJECT public: explicit myPushBut
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诺谦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值