Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Resize items given absolute positions and sizes



  • 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?



  • 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
    }

Log in to reply