How do I make an image resize, when scrolling, with the mouse button in QGraphicsView

lincoln

Hello guys, I have the following code, what I want to do is enlarge the image or reduce it, depending on how I scroll with the middle mouse button, but doing so deforms the image, and it does not meet what I expected.

Any suggestions on how I could do it. Thanks in advance.

My code:

#pragma once

#include <QMainWindow>
#include <QEvent>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
  Q_OBJECT

public:
  MainWindow(QWidget *parent = nullptr);
  ~MainWindow();

private:
  Ui::MainWindow *ui;

  void loadPictureFromFile() noexcept;

  // QObject interface
public:
  virtual bool eventFilter(QObject *watched, QEvent *event) override;
};

#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include <QFileDialog>
#include <QWheelEvent>
#include <QGraphicsSceneWheelEvent>

MainWindow::MainWindow(QWidget *parent)
  : QMainWindow(parent), ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  QObject::connect(ui->toolButton, QToolButton::clicked, this, MainWindow::loadPictureFromFile);
  ui->graphicsView->installEventFilter(this);

}

MainWindow::~MainWindow()
{
  delete ui;
}


void MainWindow::loadPictureFromFile() noexcept
{
  auto fileName=QFileDialog::getOpenFileName(this, "Open a Image", QDir::currentPath(),
                               "Images (*.jpg *.png)");

  if(fileName.isEmpty())
    return;

  QGraphicsScene* scene=new QGraphicsScene(this);
  scene->addPixmap(QPixmap(fileName).scaled(ui->graphicsView->width(),
                                            ui->graphicsView->height(),
                                            Qt::KeepAspectRatio,
                                            Qt::SmoothTransformation));


  ui->graphicsView->setScene(scene);
}

bool MainWindow::eventFilter(QObject *watched, QEvent *event)
{
  if(event->type()==QEvent::Wheel && watched==ui->graphicsView){
      ui->graphicsView->setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
      double scaleFactor = 1.15;
      QGraphicsSceneWheelEvent* wEvent=static_cast<QGraphicsSceneWheelEvent*>(event);
      if(wEvent->delta() > 0)
        ui->graphicsView->scale(scaleFactor,scaleFactor);
      else
        ui->graphicsView->scale(1.0/scaleFactor,1.0/scaleFactor);
      return true;
    }
  return QObject::eventFilter(watched, event);
}

My form:

I am using version 6.2 of Qt

Gojir4

@lincoln Try using an image with high resolution (4K or more) and set the initial scale to 0.5 or anything less than 1.0.

Gojir4

hi @lincoln ,
Are you sure you're casting to the right event type? You should either test for QEvent::GraphicsSceneWheel and cast to QGraphicsSceneWheelEvent, or test QEvent::Wheel and use QWheelEvent. I tried your code with Python and it complains that AttributeError: 'PySide6.QtGui.QWheelEvent' object has no attribute 'delta'. In my side QGraphicsSceneWheelEvent is never triggered. So I suggest casting event to QWheelEvent.

bool MainWindow::eventFilter(QObject *watched, QEvent *event)
{
  if(event->type()==QEvent::Wheel && watched==ui->graphicsView){
      ui->graphicsView->setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
      double scaleFactor = 1.15;
      QWheelEvent* wEvent=static_cast<QWheelEvent*>(event);
      if(wEvent->angleDelta().y() > 0)
        ui->graphicsView->scale(scaleFactor,scaleFactor);
      else
        ui->graphicsView->scale(1.0/scaleFactor,1.0/scaleFactor);
      return true;
  }
  return QObject::eventFilter(watched, event);
}

lincoln

@Gojir4

ok thanks, now the problem I have is that when the image is enlarged it looks very pixelated

Gojir4

@lincoln Try using an image with high resolution (4K or more) and set the initial scale to 0.5 or anything less than 1.0.