pythonpython-3.xpyqt4zoomingqgraphicsview

How to enable Pan and Zoom in a QGraphicsView


I am using python and Qt Designer to implement loading tiff images and to enable Pan and Zoom on some mouse event (wheel - zoom, press wheel - pan).

I was looking into some options and classes that can work with images etc, and so far I have found:

QGraphicsScene, QImage, QGraphicsView

I have three classes (just testing)

  1. ViewerDemo which have QGraphicsView element:

        """description of class"""
        # Form implementation generated from reading ui file 'GraphicsViewdemo.ui'
        try:
        _fromUtf8 = QtCore.QString.fromUtf8
        except AttributeError:
            def _fromUtf8(s):
                return s
            class Ui_Dialog(object):
                def setupUi(self, Dialog):
                    Dialog.setObjectName(("Dialog"))
                    Dialog.resize(500, 500)
                self.graphicsView = QtGui.QGraphicsView(Dialog)
                self.graphicsView.setGeometry(QtCore.QRect(0, 0, 500, 500))
                self.graphicsView.setObjectName(("graphicsView"))
                self.retranslateUi(Dialog)
                QtCore.QMetaObject.connectSlotsByName(Dialog)
            def retranslateUi(self, Dialog):
                Dialog.setWindowTitle(QtGui.QApplication.translate("Dialog", "Dialog", None,
    QtGui.QApplication.UnicodeUTF8))
    
  2. MyForm class, that is QDialog, where I call class ViewerDemo, loading Image, and put image into QGraphicsView

        import sys
        from ViewerDemo import *
        from PyQt4 import QtGui
        class MyForm(QtGui.QDialog):
            def __init__(self, url, parent=None):
                QtGui.QWidget.__init__(self, parent)
    
    
                self.ui = Ui_Dialog()
                self.ui.setupUi(self)
                self.scene = QtGui.QGraphicsScene(self)
               self.image = QtGui.QImage(url)
                pixmap= QtGui.QPixmap.fromImage(self.image)
                item=QtGui.QGraphicsPixmapItem(pixmap)
                self.scene.addItem(item)
                self.ui.graphicsView.setScene(self.scene)
                self.scale = 1
                QtCore.QObject.connect(self.scene, QtCore.SIGNAL('mousePressEvent()'),self.mousePressEvent)
    
        def mousePressEvent(self, event):
            print ('PRESSED : ',event.pos())
    

(3) is just where the application is executing:

    from PyQt4 import QtGui, QtCore
    import sys
    from MyForm import MyForm
    if __name__ == "__main__":
        app = QtGui.QApplication(sys.argv)
        url = "D:/probaTiff"
        myapp = MyForm(url)
        myapp.show()
        sys.exit(app.exec_())

I found how to do something on mouse-click (left and wheel click), to print pixel coordinates (I will need that to get the coordinates in the Coordinate System of the picture WGS84, for example).

What I need more, is how to zoom picture (wheel or double click, whatever) and to pan picture (holding left mouse click or holding wheel).

Or, is there some better Qt classes for doing this, and some better way Can you help me please?

This is what I have so far with this code


Solution

  • This is not too difficult to do using the built in capabilities of QGraphicsView.

    The demo script below has left-button panning and wheel zoom (including anchoring to the current cursor position). The fitInView method has been reimplemented because the built in version adds a weird fixed margin that can't be removed.

    PyQt6 version:

    from PyQt6 import QtCore, QtGui, QtWidgets
    
    class PhotoViewer(QtWidgets.QGraphicsView):
        photoClicked = QtCore.pyqtSignal(QtCore.QPointF)
    
        def __init__(self, parent):
            super(PhotoViewer, self).__init__(parent)
            self._zoom = 0
            self._empty = True
            self._scene = QtWidgets.QGraphicsScene(self)
            self._photo = QtWidgets.QGraphicsPixmapItem()
            self._scene.addItem(self._photo)
            self.setScene(self._scene)
            self.setTransformationAnchor(
                QtWidgets.QGraphicsView.ViewportAnchor.AnchorUnderMouse)
            self.setResizeAnchor(
                QtWidgets.QGraphicsView.ViewportAnchor.AnchorUnderMouse)
            self.setVerticalScrollBarPolicy(
                QtCore.Qt.ScrollBarPolicy.ScrollBarAlwaysOff)
            self.setHorizontalScrollBarPolicy(
                QtCore.Qt.ScrollBarPolicy.ScrollBarAlwaysOff)
            self.setBackgroundBrush(QtGui.QBrush(QtGui.QColor(30, 30, 30)))
            self.setFrameShape(QtWidgets.QFrame.Shape.NoFrame)
    
        def hasPhoto(self):
            return not self._empty
    
        def fitInView(self, scale=True):
            rect = QtCore.QRectF(self._photo.pixmap().rect())
            if not rect.isNull():
                self.setSceneRect(rect)
                if self.hasPhoto():
                    unity = self.transform().mapRect(QtCore.QRectF(0, 0, 1, 1))
                    self.scale(1 / unity.width(), 1 / unity.height())
                    viewrect = self.viewport().rect()
                    scenerect = self.transform().mapRect(rect)
                    factor = min(viewrect.width() / scenerect.width(),
                                 viewrect.height() / scenerect.height())
                    self.scale(factor, factor)
                self._zoom = 0
    
        def setPhoto(self, pixmap=None):
            self._zoom = 0
            if pixmap and not pixmap.isNull():
                self._empty = False
                self.setDragMode(QtWidgets.QGraphicsView.DragMode.ScrollHandDrag)
                self._photo.setPixmap(pixmap)
            else:
                self._empty = True
                self.setDragMode(QtWidgets.QGraphicsView.DragMode.NoDrag)
                self._photo.setPixmap(QtGui.QPixmap())
            self.fitInView()
    
        def wheelEvent(self, event):
            if self.hasPhoto():
                if event.angleDelta().y() > 0:
                    factor = 1.25
                    self._zoom += 1
                else:
                    factor = 0.8
                    self._zoom -= 1
                if self._zoom > 0:
                    self.scale(factor, factor)
                elif self._zoom <= 0:
                    self.fitInView()
                else:
                    self._zoom = 0
    
        def toggleDragMode(self):
            if self.dragMode() == QtWidgets.QGraphicsView.DragMode.ScrollHandDrag:
                self.setDragMode(QtWidgets.QGraphicsView.DragMode.NoDrag)
            elif not self._photo.pixmap().isNull():
                self.setDragMode(QtWidgets.QGraphicsView.DragMode.ScrollHandDrag)
    
        def mousePressEvent(self, event):
            if self._photo.isUnderMouse():
                self.photoClicked.emit(self.mapToScene(event.position().toPoint()))
            super(PhotoViewer, self).mousePressEvent(event)
    
    
    class Window(QtWidgets.QWidget):
        def __init__(self):
            super(Window, self).__init__()
            self.viewer = PhotoViewer(self)
            # 'Load image' button
            self.btnLoad = QtWidgets.QToolButton(self)
            self.btnLoad.setText('Load image')
            self.btnLoad.clicked.connect(self.loadImage)
            # Button to change from drag/pan to getting pixel info
            self.btnPixInfo = QtWidgets.QToolButton(self)
            self.btnPixInfo.setText('Enter pixel info mode')
            self.btnPixInfo.clicked.connect(self.pixInfo)
            self.editPixInfo = QtWidgets.QLineEdit(self)
            self.editPixInfo.setReadOnly(True)
            self.viewer.photoClicked.connect(self.photoClicked)
            # Arrange layout
            VBlayout = QtWidgets.QVBoxLayout(self)
            VBlayout.addWidget(self.viewer)
            HBlayout = QtWidgets.QHBoxLayout()
            HBlayout.setAlignment(QtCore.Qt.AlignmentFlag.AlignLeft)
            HBlayout.addWidget(self.btnLoad)
            HBlayout.addWidget(self.btnPixInfo)
            HBlayout.addWidget(self.editPixInfo)
            VBlayout.addLayout(HBlayout)
    
        def loadImage(self):
            self.viewer.setPhoto(QtGui.QPixmap('image.jpg'))
    
        def pixInfo(self):
            self.viewer.toggleDragMode()
    
        def photoClicked(self, pos):
            if self.viewer.dragMode() == QtWidgets.QGraphicsView.DragMode.NoDrag:
                self.editPixInfo.setText('%d, %d' % (pos.x(), pos.y()))
    
    
    if __name__ == '__main__':
    
        import sys
        app = QtWidgets.QApplication(sys.argv)
        window = Window()
        window.setGeometry(500, 300, 800, 600)
        window.show()
        sys.exit(app.exec())
    

    PyQt5 version:

    from PyQt5 import QtCore, QtGui, QtWidgets
    
    class PhotoViewer(QtWidgets.QGraphicsView):
        photoClicked = QtCore.pyqtSignal(QtCore.QPoint)
    
        def __init__(self, parent):
            super(PhotoViewer, self).__init__(parent)
            self._zoom = 0
            self._empty = True
            self._scene = QtWidgets.QGraphicsScene(self)
            self._photo = QtWidgets.QGraphicsPixmapItem()
            self._scene.addItem(self._photo)
            self.setScene(self._scene)
            self.setTransformationAnchor(QtWidgets.QGraphicsView.AnchorUnderMouse)
            self.setResizeAnchor(QtWidgets.QGraphicsView.AnchorUnderMouse)
            self.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
            self.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
            self.setBackgroundBrush(QtGui.QBrush(QtGui.QColor(30, 30, 30)))
            self.setFrameShape(QtWidgets.QFrame.NoFrame)
    
        def hasPhoto(self):
            return not self._empty
    
        def fitInView(self, scale=True):
            rect = QtCore.QRectF(self._photo.pixmap().rect())
            if not rect.isNull():
                self.setSceneRect(rect)
                if self.hasPhoto():
                    unity = self.transform().mapRect(QtCore.QRectF(0, 0, 1, 1))
                    self.scale(1 / unity.width(), 1 / unity.height())
                    viewrect = self.viewport().rect()
                    scenerect = self.transform().mapRect(rect)
                    factor = min(viewrect.width() / scenerect.width(),
                                 viewrect.height() / scenerect.height())
                    self.scale(factor, factor)
                self._zoom = 0
    
        def setPhoto(self, pixmap=None):
            self._zoom = 0
            if pixmap and not pixmap.isNull():
                self._empty = False
                self.setDragMode(QtWidgets.QGraphicsView.ScrollHandDrag)
                self._photo.setPixmap(pixmap)
            else:
                self._empty = True
                self.setDragMode(QtWidgets.QGraphicsView.NoDrag)
                self._photo.setPixmap(QtGui.QPixmap())
            self.fitInView()
    
        def wheelEvent(self, event):
            if self.hasPhoto():
                if event.angleDelta().y() > 0:
                    factor = 1.25
                    self._zoom += 1
                else:
                    factor = 0.8
                    self._zoom -= 1
                if self._zoom > 0:
                    self.scale(factor, factor)
                elif self._zoom <= 0:
                    self.fitInView()
                else:
                    self._zoom = 0
    
        def toggleDragMode(self):
            if self.dragMode() == QtWidgets.QGraphicsView.ScrollHandDrag:
                self.setDragMode(QtWidgets.QGraphicsView.NoDrag)
            elif not self._photo.pixmap().isNull():
                self.setDragMode(QtWidgets.QGraphicsView.ScrollHandDrag)
    
        def mousePressEvent(self, event):
            if self._photo.isUnderMouse():
                self.photoClicked.emit(self.mapToScene(event.pos()).toPoint())
            super(PhotoViewer, self).mousePressEvent(event)
    
    
    class Window(QtWidgets.QWidget):
        def __init__(self):
            super(Window, self).__init__()
            self.viewer = PhotoViewer(self)
            # 'Load image' button
            self.btnLoad = QtWidgets.QToolButton(self)
            self.btnLoad.setText('Load image')
            self.btnLoad.clicked.connect(self.loadImage)
            # Button to change from drag/pan to getting pixel info
            self.btnPixInfo = QtWidgets.QToolButton(self)
            self.btnPixInfo.setText('Enter pixel info mode')
            self.btnPixInfo.clicked.connect(self.pixInfo)
            self.editPixInfo = QtWidgets.QLineEdit(self)
            self.editPixInfo.setReadOnly(True)
            self.viewer.photoClicked.connect(self.photoClicked)
            # Arrange layout
            VBlayout = QtWidgets.QVBoxLayout(self)
            VBlayout.addWidget(self.viewer)
            HBlayout = QtWidgets.QHBoxLayout()
            HBlayout.setAlignment(QtCore.Qt.AlignLeft)
            HBlayout.addWidget(self.btnLoad)
            HBlayout.addWidget(self.btnPixInfo)
            HBlayout.addWidget(self.editPixInfo)
            VBlayout.addLayout(HBlayout)
    
        def loadImage(self):
            self.viewer.setPhoto(QtGui.QPixmap('image.jpg'))
    
        def pixInfo(self):
            self.viewer.toggleDragMode()
    
        def photoClicked(self, pos):
            if self.viewer.dragMode()  == QtWidgets.QGraphicsView.NoDrag:
                self.editPixInfo.setText('%d, %d' % (pos.x(), pos.y()))
    
    
    if __name__ == '__main__':
    
        import sys
        app = QtWidgets.QApplication(sys.argv)
        window = Window()
        window.setGeometry(500, 300, 800, 600)
        window.show()
        sys.exit(app.exec_())
    

    PyQt4 version:

    from PyQt4 import QtCore, QtGui
    
    class PhotoViewer(QtGui.QGraphicsView):
        photoClicked = QtCore.pyqtSignal(QtCore.QPoint)
    
        def __init__(self, parent):
            super(PhotoViewer, self).__init__(parent)
            self._zoom = 0
            self._empty = True
            self._scene = QtGui.QGraphicsScene(self)
            self._photo = QtGui.QGraphicsPixmapItem()
            self._scene.addItem(self._photo)
            self.setScene(self._scene)
            self.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
            self.setResizeAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
            self.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
            self.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
            self.setBackgroundBrush(QtGui.QBrush(QtGui.QColor(30, 30, 30)))
            self.setFrameShape(QtGui.QFrame.NoFrame)
    
        def hasPhoto(self):
            return not self._empty
    
        def fitInView(self, scale=True):
            rect = QtCore.QRectF(self._photo.pixmap().rect())
            if not rect.isNull():
                self.setSceneRect(rect)
                if self.hasPhoto():
                    unity = self.transform().mapRect(QtCore.QRectF(0, 0, 1, 1))
                    self.scale(1 / unity.width(), 1 / unity.height())
                    viewrect = self.viewport().rect()
                    scenerect = self.transform().mapRect(rect)
                    factor = min(viewrect.width() / scenerect.width(),
                                 viewrect.height() / scenerect.height())
                    self.scale(factor, factor)
                self._zoom = 0
    
        def setPhoto(self, pixmap=None):
            self._zoom = 0
            if pixmap and not pixmap.isNull():
                self._empty = False
                self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
                self._photo.setPixmap(pixmap)
            else:
                self._empty = True
                self.setDragMode(QtGui.QGraphicsView.NoDrag)
                self._photo.setPixmap(QtGui.QPixmap())
            self.fitInView()
    
        def wheelEvent(self, event):
            if self.hasPhoto():
                if event.delta() > 0:
                    factor = 1.25
                    self._zoom += 1
                else:
                    factor = 0.8
                    self._zoom -= 1
                if self._zoom > 0:
                    self.scale(factor, factor)
                elif self._zoom <= 0:
                    self.fitInView()
                else:
                    self._zoom = 0
    
        def toggleDragMode(self):
            if self.dragMode() == QtGui.QGraphicsView.ScrollHandDrag:
                self.setDragMode(QtGui.QGraphicsView.NoDrag)
            elif not self._photo.pixmap().isNull():
                self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
    
        def mousePressEvent(self, event):
            if self._photo.isUnderMouse():
                self.photoClicked.emit(self.mapToScene(event.pos()).toPoint())
            super(PhotoViewer, self).mousePressEvent(event)
    
    
    class Window(QtGui.QWidget):
        def __init__(self):
            super(Window, self).__init__()
            self.viewer = PhotoViewer(self)
            # 'Load image' button
            self.btnLoad = QtGui.QToolButton(self)
            self.btnLoad.setText('Load image')
            self.btnLoad.clicked.connect(self.loadImage)
            # Button to change from drag/pan to getting pixel info
            self.btnPixInfo = QtGui.QToolButton(self)
            self.btnPixInfo.setText('Enter pixel info mode')
            self.btnPixInfo.clicked.connect(self.pixInfo)
            self.editPixInfo = QtGui.QLineEdit(self)
            self.editPixInfo.setReadOnly(True)
            self.viewer.photoClicked.connect(self.photoClicked)
            # Arrange layout
            VBlayout = QtGui.QVBoxLayout(self)
            VBlayout.addWidget(self.viewer)
            HBlayout = QtGui.QHBoxLayout()
            HBlayout.setAlignment(QtCore.Qt.AlignLeft)
            HBlayout.addWidget(self.btnLoad)
            HBlayout.addWidget(self.btnPixInfo)
            HBlayout.addWidget(self.editPixInfo)
            VBlayout.addLayout(HBlayout)
    
        def loadImage(self):
            self.viewer.setPhoto(QtGui.QPixmap('image.jpg'))
    
        def pixInfo(self):
            self.viewer.toggleDragMode()
    
        def photoClicked(self, pos):
            if self.viewer.dragMode()  == QtGui.QGraphicsView.NoDrag:
                self.editPixInfo.setText('%d, %d' % (pos.x(), pos.y()))
    
    
    if __name__ == '__main__':
    
        import sys
        app = QtGui.QApplication(sys.argv)
        window = Window()
        window.setGeometry(500, 300, 800, 600)
        window.show()
        sys.exit(app.exec_())