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 aQQuickWidget
, withresizeMode == SizeRootObjectToView
.
The root page contains anImage
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 myQMainWindow
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
Item
and 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 }