Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. ImageViewer QLabel/QScrollArea top and bottom margins?
QtWS25 Last Chance

ImageViewer QLabel/QScrollArea top and bottom margins?

Scheduled Pinned Locked Moved Unsolved General and Desktop
qlabelqscrollareaqguiapplication
6 Posts 2 Posters 2.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • F Offline
    F Offline
    forlorn
    wrote on 28 Sept 2018, 22:51 last edited by
    #1

    Hi Everyone. I'm trying to create something like a comic reader using the Qt Image Viewer example as a template.

    I managed to center the image in the middle of the QLabel (or is it QScrollArea? I'm very new to Qt still). My problem is, I want the image to fit the QLabel/QScrollArea automatically when it is opened by the user. Not stretched out to fit the whole screen, but I want the top of the image to meet the top of the GUI screen and the bottom of the image to meet the bottom of the GUI screen.

    For example, this is what I get when opening an image. As you can see, the image is large, so it cuts it off and creates a scroll bar instead.
    0_1538174678834_wrong.PNG

    What I want is the picture zoomed out enough until it meets the top and bottom of the GUI. As you can see in this picture, I manually scrolled out, and where I annotated the image in red is the space that needs to be filled in so the image meets the top and bottom margins perfectly.
    0_1538174757841_want.PNG

    Here is my main constructor where I create the QLabel and QScrollArea:

    Reader::Reader() :
        imageLabel(new QLabel),
        scrollArea(new QScrollArea)
    {
        imageLabel->setBackgroundRole(QPalette::Base);
        imageLabel->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
        imageLabel->setScaledContents(true);
    
        scrollArea->setBackgroundRole(QPalette::Dark);
        scrollArea->setWidget(imageLabel);
        scrollArea->setVisible(false);
        scrollArea->setAlignment(Qt::AlignCenter); // make images appear in center
        setCentralWidget(scrollArea);
    
        createActions();
    
        resize(QGuiApplication::primaryScreen()->availableSize() * 3 / 5);
    }
    

    Here is the function used to set the image when the user navigates back and forth between images (which I stored in a vector when the user selected the files on their computer):

    /* Called when user navigates back and forth between images */
    void Reader::setImage(const QImage& newImage)
    {
        currentImage = newImage;
        imageLabel->setPixmap(QPixmap::fromImage(currentImage));
        scaleFactor = 1.0;
    
        scrollArea->setVisible(true);
        fitToWindowAct->setEnabled(true);
        updateActions();
    
        if (!fitToWindowAct->isChecked()) imageLabel->adjustSize();
    }
    

    Here are my functions for scaling the image and adjusting the scroll bar:

    void Reader::scaleImage(double factor)
    {
        Q_ASSERT(imageLabel->pixmap());
        scaleFactor *= factor;
        imageLabel->resize(scaleFactor * imageLabel->pixmap()->size());
    
        adjustScrollBar(scrollArea->horizontalScrollBar(), factor);
        adjustScrollBar(scrollArea->verticalScrollBar(), factor);
    
        zoomInAct->setEnabled(scaleFactor < 3.0);
        zoomOutAct->setEnabled(scaleFactor > 0.333);
    }
    
    void Reader::adjustScrollBar(QScrollBar *scrollBar, double factor)
    {
        scrollBar->setValue(int(factor * scrollBar->value()
                                + ((factor - 1) * scrollBar->pageStep()/2)));
    }
    

    Please let me know if you need any more code snippets or need me to provide you with any other information, and thanks for your help in advance!

    1 Reply Last reply
    0
    • S Offline
      S Offline
      SGaist
      Lifetime Qt Champion
      wrote on 29 Sept 2018, 21:35 last edited by
      #2

      Hi and welcome to devnet,

      Isn't the QScrollArea::widgetResizable property what you are looking for ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      F 1 Reply Last reply 30 Sept 2018, 17:53
      0
      • S SGaist
        29 Sept 2018, 21:35

        Hi and welcome to devnet,

        Isn't the QScrollArea::widgetResizable property what you are looking for ?

        F Offline
        F Offline
        forlorn
        wrote on 30 Sept 2018, 17:53 last edited by
        #3

        @SGaist I tried setting this property to True, and it did not do what I was expecting.

        In addition to fitting the top and bottom of the image to the GUI, it also took the left and right borders and stretched them to fit the GUI as well, distorting the image and making it look wider. I only want the top and bottom to be fit to the GUI. Does this make sense?

        Thanks!

        1 Reply Last reply
        0
        • S Offline
          S Offline
          SGaist
          Lifetime Qt Champion
          wrote on 30 Sept 2018, 20:58 last edited by
          #4

          Then you either need to do custom rendering to resize the image the way you want or have the QLabel inside the widget set on the QScrollArea and resize it by hand to set the aspect ratio you need to display your image.

          Interested in AI ? www.idiap.ch
          Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

          F 1 Reply Last reply 1 Oct 2018, 01:04
          0
          • S SGaist
            30 Sept 2018, 20:58

            Then you either need to do custom rendering to resize the image the way you want or have the QLabel inside the widget set on the QScrollArea and resize it by hand to set the aspect ratio you need to display your image.

            F Offline
            F Offline
            forlorn
            wrote on 1 Oct 2018, 01:04 last edited by
            #5

            @SGaist Could you point me to an example of what you mean by custom rendering?

            1 Reply Last reply
            0
            • S Offline
              S Offline
              SGaist
              Lifetime Qt Champion
              wrote on 1 Oct 2018, 21:10 last edited by
              #6

              The Basic Drawing Example shows that. In your case, you'd likely just have to paint your image using the correct scaling information.

              Interested in AI ? www.idiap.ch
              Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

              1 Reply Last reply
              0

              1/6

              28 Sept 2018, 22:51

              • Login

              • Login or register to search.
              1 out of 6
              • First post
                1/6
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved