Styjun

I have a scroll area that contains a resizable widget. The user is able to increment and decrement the integer scale factor of this inner widget (which changes its size). When the user increments the scale, the part of the inner widget visible in the top left corner remains fixed. This gives the effect of zooming into the top left corner of the view.

When the size of the inner widget changes, I need to scroll the inner widget to make it look like the user is zooming into the center of the view. I want to keep the part of the widget in the center of the view fixed in the center while resizing.

I drew some diagrams to help visualise the problem. The pink rectangle is the inner widget. The brown rectangle is the view onto the widget through the scroll area. The green dots are fixed points on the inner widget.

Before scaling

After scaling (current undesirable behaviour)

After scaling (desired behaviour)

As you can (hopefully) see from these crudely drawn diagrams. Simply increasing the size of a widget inside a scroll area results on zooming into the top left corner or the view. I have to do something more to zoom into the center of the view. Also, the inner widget can be much smaller than the scroll area. I only want to shift the inner widget when it is larger than the scroll area.

This is a minimal example of the undesirable behaviour. Pressing Z (after clicking on the inner widget to change focus) will zoom into the top left corner of the view. I want to zoom into the center of the view.

#include <QtGui/qpainter.h>
#include <QtWidgets/qscrollbar.h>
#include <QtWidgets/qscrollarea.h>
#include <QtWidgets/qmainwindow.h>
#include <QtWidgets/qapplication.h>

class InnerWidget final : public QWidget 
public:
 explicit InnerWidget(QScrollArea *parent)
 : QWidgetparent, parentparent 
 updateSize();
 setFocusPolicy(Qt::StrongFocus);
 

private:
 QScrollArea *parent;
 int scale = 1;

 void updateSize() 
 setFixedSize(256 * scale, 256 * scale);
 

 void paintEvent(QPaintEvent *) override 
 QPainter painterthis;
 const QColor green = 0, 255, 0;
 painter.fillRect(0, 0, width(), height(), 255, 255, 255);
 painter.fillRect(32 * scale, 32 * scale, 16 * scale, 16 * scale, green);
 painter.fillRect(128 * scale, 128 * scale, 16 * scale, 16 * scale, green);
 

 void keyPressEvent(QKeyEvent *event) override 
 if (event->isAutoRepeat()) return;
 QScrollBar *hbar = parent->horizontalScrollBar();
 QScrollBar *vbar = parent->verticalScrollBar();
 if (event->key() == Qt::Key_Z) 
 // need to call bar->setValue and bar->value here
 scale = std::min(scale + 1, 64);
 updateSize();
 else if (event->key() == Qt::Key_X) 
 // here too
 scale = std::max(scale - 1, 1);
 updateSize();
 
 
;

int main(int argc, char **argv) 
 QApplication appargc, argv;
 QMainWindow window;
 QScrollArea scrollArea&window;
 InnerWidget inner&scrollArea;
 window.setBaseSize(512, 512);
 window.setCentralWidget(&scrollArea);
 scrollArea.setAlignment(Qt::AlignCenter);
 scrollArea.setWidget(&inner);
 window.show();
 return app.exec();

To reproduce the problem, zoom in a couple of times then position one of the rectangles in the center of the window. Zooming will move the rectangle toward the bottom right corner. I want zooming to keep the rectangle in the center.

This feels like an easy problem but I can’t seem to get my head around the math. I’ve tried various calculations on the scroll values but none of them seem to behave as I want.

I messed around with the numbers for a while and then I figured it out. Here’s the fully working solution.

#include <QtGui/qpainter.h>
#include <QtWidgets/qscrollbar.h>
#include <QtWidgets/qmainwindow.h>
#include <QtWidgets/qscrollarea.h>
#include <QtWidgets/qapplication.h>

class InnerWidget final : public QWidget 
public:
 explicit InnerWidget(QScrollArea *parent)
 : QWidgetparent, parentparent, scale1 
 updateSize();
 setFocusPolicy(Qt::StrongFocus);
 

private:
 QScrollArea *parent;
 int scale;

 void updateSize() 
 setFixedSize(256 * scale, 256 * scale);
 

 void paintEvent(QPaintEvent *) override 
 QPainter painterthis;
 const QColor green = 0, 255, 0;
 painter.fillRect(0, 0, width(), height(), 255, 255, 255);
 painter.fillRect(32 * scale, 32 * scale, 16 * scale, 16 * scale, green);
 painter.fillRect(128 * scale, 128 * scale, 16 * scale, 16 * scale, green);
 

 void adjustScroll(const int oldScale) 
 if (scale == oldScale) return;
 QScrollBar *hbar = parent->horizontalScrollBar();
 QScrollBar *vbar = parent->verticalScrollBar();
 if (width() >= parent->width()) 
 const int halfWidth = parent->width() / 2;
 hbar->setValue((hbar->value() + halfWidth) * scale / oldScale - halfWidth);
 
 if (height() >= parent->height()) 
 const int halfHeight = parent->height() / 2;
 vbar->setValue((vbar->value() + halfHeight) * scale / oldScale - halfHeight);
 
 

 void keyPressEvent(QKeyEvent *event) override 
 if (event->isAutoRepeat()) return;
 const int oldScale = scale;
 if (event->key() == Qt::Key_Z) 
 scale = std::min(scale + 1, 64);
 updateSize();
 adjustScroll(oldScale);
 else if (event->key() == Qt::Key_X) 
 scale = std::max(scale - 1, 1);
 updateSize();
 adjustScroll(oldScale);
 
 
;

int main(int argc, char **argv) 
 QApplication appargc, argv;
 QMainWindow window;
 QScrollArea scrollArea&window;
 InnerWidget inner&scrollArea;
 window.setBaseSize(512, 512);
 window.setCentralWidget(&scrollArea);
 scrollArea.setAlignment(Qt::AlignCenter);
 scrollArea.setWidget(&inner);
 window.show();
 return app.exec();