Qt事件过滤实现点击图片的放大和缩小

本文实例为大家分享了Qt事件过滤实现点击图片放大和缩小的具体代码,供大家参考,具体内容如下

Qt事件过滤实现点击图片的放大查看

标签(空格分隔): eventFilter 事件过滤

一、项目内容

新建桌面应用程序testEventFilter,类名EventFilter,基类QDialog,不勾选界面文件,通过监视三个蝴蝶标签的事件达到鼠标按下时图片放大(缩小)的效果。

二、项目实现

  • Eventfilter.h重写事件过滤槽函数,并添加相应的成员数据。
#ifndef EVENTFILTER_H
#define EVENTFILTER_H
#include <QLabel>
#include <QImage>
#include <QDialog>

class EventFilter : public QDialog
{
    Q_OBJECT

public:
    EventFilter(QWidget *parent = nullptr,Qt::WindowFlags f=0);
    ~EventFilter();
public slots:
    bool eventFilter(QObject *watched, QEvent *event) override;
private:
    QLabel *m_label1;       //显示图片1
    QLabel *m_label2;       //显示图片2
    QLabel *m_label3;       //显示图片3
    QLabel *m_stateLabel;   //用于显示按下、松开的是哪一张图片
    QImage m_image1;
    QImage m_image2;
    QImage m_image3;

};
#endif // EVENTFILTER_H
  • 构造函数(创建布局、加载图片、设置图片、给部件添加布局、给图片标签布局安装事件过滤,指定当前窗体对象为监视事件的对象)
EventFilter::EventFilter(QWidget *parent,Qt::WindowFlags f)
    : QDialog(parent,f)
{
    setWindowTitle("事件过滤");
    m_label1=new QLabel;
    m_label2=new QLabel;
    m_label3=new QLabel;
    m_stateLabel=new QLabel(QString("鼠标按下标志"));
    m_stateLabel->setAlignment(Qt::AlignHCenter);    //设置标签居中显示
    //加载图片
    m_image1.load(QString("../fly1.png")); //图片存在默认Debug目录的上一级目录
    m_image2.load(QString("../fly2.png"));
    m_image3.load(QString("../fly3.png"));

    //给标签设置图片
    m_label1->setPixmap(QPixmap::fromImage(m_image1));
    m_label2->setPixmap(QPixmap::fromImage(m_image2));
    m_label3->setPixmap(QPixmap::fromImage(m_image3));

    //设置水平布局、垂直布局
    QHBoxLayout *hLayout=new QHBoxLayout;
    hLayout->addWidget(m_label1);
    hLayout->addWidget(m_label2);
    hLayout->addWidget(m_label3);

    QVBoxLayout *mainLayout=new QVBoxLayout(this);
    mainLayout->addLayout(hLayout);
    mainLayout->addWidget(m_stateLabel);

    resize(m_image2.width()*3,m_image2.height()*2);//调整窗口的大小

    //给图片标签安装事件过滤,指定当前窗体对象为监视事件的对象
    m_label1->installEventFilter(this);
    m_label2->installEventFilter(this);
    m_label3->installEventFilter(this);

}
  • 重写事件过滤槽函数,watched为被监视对象,通过判断watched对象是m_label1、m_label2、m_label3,判断事件对象event的类型,再对图片和标签进行单独的处理。
//重写事件过滤槽函数,watched为被监视对象
bool EventFilter::eventFilter(QObject *watched, QEvent *event)
{
    QMatrix matrix;
    QImage tempImage;//保存放大过后的图片
    matrix.scale(2.0,2.0);//放大两倍
    if(watched==m_label1){
        //事件类型是鼠标按下事件
        if(event->type()==QEvent::MouseButtonPress){
            QMouseEvent *mouseEvent=reinterpret_cast<QMouseEvent*>(event);
            if(mouseEvent->button()==Qt::LeftButton){
                m_stateLabel->setText("鼠标左键按下图片1");
            }else if(mouseEvent->button()==Qt::MidButton){
                m_stateLabel->setText("鼠标中键按下图片1");
            }else if(mouseEvent->button()==Qt::RightButton){
                m_stateLabel->setText("鼠标右键按下图片1");
        }
            //转换图片的比例
            tempImage=m_image1.transformed(matrix);
            m_label1->setPixmap(QPixmap::fromImage(tempImage));

        }
        //鼠标松开事件
        if(event->type()==QEvent::MouseButtonRelease){
            m_stateLabel->setText("鼠标松开图片1");
            m_label1->setPixmap(QPixmap::fromImage(m_image1));//鼠标松开返回本身图片的大小
        }
    }
    //m_label2、m_label2的处理过程同m_label1相同
    else if(watched==m_label2){
        if(event->type()==QEvent::MouseButtonPress){
            QMouseEvent *e=reinterpret_cast<QMouseEvent*>(event);
            if(e->buttons()&Qt::LeftButton){
                m_stateLabel->setText("鼠标左键按下图片2");
            }else if(e->buttons()&Qt::MidButton){
                m_stateLabel->setText("鼠标中键按下图片2");
            }else if(e->buttons()&Qt::RightButton){
                m_stateLabel->setText("鼠标右键按下图片2");
            }
            tempImage=m_image2.transformed(matrix);
            m_label2->setPixmap(QPixmap::fromImage(tempImage));
        }
        if(event->type()==QEvent::MouseButtonRelease){
            m_stateLabel->setText("鼠标松开图片2");
            m_label2->setPixmap(QPixmap::fromImage(m_image2));
        }
    }
    else if(watched==m_label3){
        if(event->type()==QEvent::MouseButtonPress){
            QMouseEvent *e=reinterpret_cast<QMouseEvent*>(event);
            if(e->buttons()&Qt::LeftButton){
                m_stateLabel->setText("鼠标左键按下图片3");
            }else if(e->buttons()&Qt::MidButton){
                m_stateLabel->setText("鼠标中键按下图片3");
            }else if(e->buttons()&Qt::RightButton){
                m_stateLabel->setText("鼠标右键按下图片3");
            }
            tempImage=m_image3.transformed(matrix);
            m_label3->setPixmap(QPixmap::fromImage(tempImage));
        }
        if(event->type()==QEvent::MouseButtonRelease){
            m_stateLabel->setText("鼠标松开图片3");
            m_label3->setPixmap(QPixmap::fromImage(m_image3));
        }
    }
    //事件交给上层对话框进行处理
    return QDialog::eventFilter(watched,event);
}

三、效果

  • 点击任意一张图片(鼠标不松开)均可放大查看;
  • 鼠标松开,图片返回原来的大小
  • 标签m_stateLabel 提示当前操作的图片类型

1、初始化图片:

2、点击图片1:

3、点击图片2:

4、鼠标松开第二张图片:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用Qt的QChartView实现缩放和放大功能

    目录 更好用的QCustomPlot QCustomPlot介绍 QCustomPlot的下载与安装 QCustomPlot的使用 使用示例 Qt的常用图表方式Qwt.QChart.QCustomPlot等.QCharts是官方的,功能强大些.QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等.QCustomPlot比Qchat简单好用些. 这里介绍下QChartView缩放和放大功能的实现. 这里介绍下QChartView缩放和放大功能的

  • Qt实现矩形大小任意缩放的示例代码

    目录 现有功能 运行结果 源码 point_button.h point_button.cpp window.h window.cp main.cpp 现有功能 1.在窗口上绘制任意大小的矩形. 2.通过边角的拖曳按钮改变矩形大小. 运行结果 源码 point_button.h #ifndef POINTBUTTON_H #define POINTBUTTON_H #include <QPushButton> #include <QWidget> #include <QMou

  • Qt通过QGraphicsview实现简单缩放及还原效果

    本文主要介绍通过QGraphicsview实现简单的缩放,以及缩放后还原原始大小. 1,自定义一个drawview继承QGraphicsview,缩放主要实现的函数为 void scale(qreal sx,qreal sy); 通过scale可以对view进行放大或缩小. 则可以在drawview中定义缩放slots为 void drawview::zoomIn(qreal delta) { zoom(delta); } void drawview::zoomOut(qreal delta)

  • Qt事件过滤实现点击图片的放大和缩小

    本文实例为大家分享了Qt事件过滤实现点击图片放大和缩小的具体代码,供大家参考,具体内容如下 Qt事件过滤实现点击图片的放大查看 标签(空格分隔): eventFilter 事件过滤 一.项目内容 新建桌面应用程序testEventFilter,类名EventFilter,基类QDialog,不勾选界面文件,通过监视三个蝴蝶标签的事件达到鼠标按下时图片放大(缩小)的效果. 二.项目实现 Eventfilter.h重写事件过滤槽函数,并添加相应的成员数据. #ifndef EVENTFILTER_H

  • jQuery实现的点击图片居中放大缩小功能示例

    本文实例讲述了jQuery实现的点击图片居中放大缩小功能.分享给大家供大家参考,具体如下: 该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) jQuery3.2.1文件点击此处本站下载. 第二步:准备HTML文件 <div id="outerdiv" class="wrap"> <div id="innerdi

  • vue实现裁切图片同时实现放大、缩小、旋转功能

    本篇文章主要介绍了vue实现裁切图片同时实现放大.缩小.旋转功能,分享给大家,具体如下: 实现效果: 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 大概原理: 利用h5 FileReader 对象, 获取 <input type="file"/> "上传到浏览器的文件" ,文件形式 为base64形式, 把 base64 赋给canvas的上下文. 然后给canvas 元素上加入对(moused

  • JavaScript实现点击按钮字体放大、缩小

    本文给大家分享js实现点击按钮字体放大缩小实例代码,代码简单易懂,需要的朋友参考下吧 具体代码如下所示: <style> .bb{color:red;} .cc{color:green;} .chapter {font-size: 1.5em;} .normal{font-size:12px;} .hidden{display:none;} </style> <script> $(document).ready(function() { $('div.aa').addC

  • Android实现ImageView图片双击放大及缩小

    本文实例介绍了Android实现ImageView图片双击放大及缩小的相关技巧,分享给大家供大家参考,具体内容如下 public class DoubleScaleImageView extends ImageView implements OnTouchListener, OnGlobalLayoutListener { private boolean isFirst = false; private float doubleScale;// 双击放大的值 private Matrix mSc

  • Android App中实现可以双击放大和缩小图片功能的实例

    先来看一个很简单的核心图片缩放方法: public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "s

  • Android实现图片反转、翻转、旋转、放大和缩小

    ********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

  • 利用iOS手势与scrollView代理实现图片的放大缩小

    前言 对于图片拉伸是移动开发中很常见的需求,最近工作中就遇到了利用iOS实现对图片的放大和缩小效果,通过查找资料找到了两种解决方法,分别是用捏合手势和用scrollView的代理方法来实现,下面话不多说,来看看详细的方法介绍吧. 第一种方法:用捏合手势放大缩小 @interface ViewController () @property (strong, nonatomic) IBOutlet UIView *redView; @property (assign, nonatomic) CGFl

  • Vue实现图片预览效果实例(放大、缩小、拖拽)

    前言 这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上 这里先分解部分,后面有全部代码 1.需要有黑色背景用于预览背景: 这里的背景要占满整个屏幕(这里的一般是参考其他插件预览的样式进行模拟设计的),样式在后方代码内 2.展示图片并且把图片展示到背景板最中间. 3.最重要的下方的两部分: 滚轮放大缩小图片: bbimg() { let e = e ||

  • vue实现点击图片放大效果

    本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view" @click="bigImg"> <!-- 遮罩层 --> <div class="img

随机推荐