Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Resize items given absolute positions and sizes
Forum Updated to NodeBB v4.3 + New Features

Resize items given absolute positions and sizes

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 356 Views 1 Watching
  • 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.
  • M Offline
    M Offline
    Mark81
    wrote on last edited by Mark81
    #1

    I read this page: https://doc.qt.io/qt-5/scalability.html but I still don't understand something that should be easy.
    My QML root page is displayed into a QQuickWidget, with resizeMode == SizeRootObjectToView.
    The root page contains an Image and its size is known - say 1920x1080.
    This image is anchored to fill the parent, so it scale according to the main window.

    Fine.
    The issues rise when I have to add the other objects: images or text, mainly.
    I receive a bitmap with their absolute positions and sizes referred to the original background image (1920x1080).

    As you understand I need to scale everything in order to keep their correct appearance.
    I thought it was simple:

    property real ratio: root.width / 1920
    property real img1_X: 330 // absolute position
    property real img1_Y: 200
    
    Image {
        x: img1_X * ratio
        y: img1_Y * ratio
        scale: ratio
    }
    

    but when I change the size of the viewport ratio doesn't change. It changes when I maximize or restore my QMainWindow but not when I resize it manually. Anyway, the images that are anchored to fill the root item are correctly resized every-time.

    What am I missing here?

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Mark81
      wrote on last edited by
      #2

      I solved putting everything into an Itemand then applying the transformation needed:

      property real ratio: imgBackground.paintedWidth / 1920.0
      property real xBase: (root.width - imgBackground.paintedWidth) / 2.0
      property real yBase: (root.height - imgBackground.paintedHeight) / 2.0
      
      Item {
          x: 0; y: 0
          width: 1920
          height: 1080
      
          transform: [
              Scale { xScale: ratio; yScale: ratio},
              Translate { x: xBase; y: yBase }
          ]
      
          // objects with absolute position and size
      }
      
      1 Reply Last reply
      0

      • Login

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