How do I change imagesize to fit on other screens and preserve aspect ratio
-
@p3c0 I have tried with fillMode: Image.PreserveAspectFit on my images but they do not resize when I resize the window. Am I using it wrong? Now when I use Screen.width it only make the white space bigger around the image.
what am I doing wrong?
-
Now I have worked with layouts and resized all images to same ratio 1440 x 540 except 2 images. Those two images are speedgauge pins and need to be positioning in the middle of the gauges. What I want now is that those pins should change position and size when resizing the window that are set in full screen. So if image window is resized then these two images should also resize and find their way to the center of the gauge again.
can you help me?
-
@antemort If I understood you correctly then you just need to use
anchors.centerIn
and anchor it to its parent so that it centers even if you resize the parent window. To resize it according to parent you can bind it to parents dimensions. See the following exampleimport QtQuick 2.4 Item { width: 200 height: 200 Image { anchors.centerIn: parent width: parent.width / 2.0 // can be anything as per your requirements height: parent.height / 2.0 source: "https://placeholdit.imgix.net/~text?txtsize=50&txt=Qt&w=100&h=100" } }
Try using your image as the source.
-
I'm sorry, I must have explained it badly. I have two gauges on different sides off a symmetry line so those are not alligned in the center off the picture. The two pins are positioning with x and y values to be positioning in the center of the gauge circles. the pins are small images which have the orgin at the right side of the image facing the middle of the gaugecircle. So when the screen getting bigger or smaller i want width and height and the x and y values to be changed so it follows the other images that have anchors.fill: parent.
-
I have explicity set x and y for the moment. I want to anchor but doesn't know how when the the pins are not position in the center of the image, only positioning so it is in the center of the circles.
Image { id: visare source: "images/visare_2_skugga.png" x: 113 y: 271 width: 210 height: 13 transformOrigin: Item.Right opacity: 1 rotation: needleAngle smooth: true Behavior on rotation{ SpringAnimation{ spring: 0.5; damping: 0.2; mass:2; } } } Image { id: visare_rpm source: "images/visare_2_skugga.png" x: 912 y: 270 width: 210 height: 13 transformOrigin: Item.Right opacity: 1 rotation: needleRpm smooth: true Behavior on rotation{ SpringAnimation{ spring: 0.5; damping: 0.2; mass:2; } } }
-
@antemort Wow this is way too different than what I understood earlier.
You have a large image and it has some circles at some positions and you want that pins to be centered to that circles. Is it ? And for that you have hard-coded the pin'sx
andy
positions by trial and error method (i.e manually). If thats the case then I think you should change the implementation. It would be too difficult to maintain that position when the image resizes.
Can you describe/explain it pictographically ? -
http://postimg.org/image/62lrab1jt/
here it is. Print screen from Qt designer with pins in right position
-
@antemort Hmm this is what I guessed and was afraid of. I thinks it a bad idea to go for this way of implementation. Instead you should divide it into seperate images. One being that speedometer image while other being the background. Then you can just use
Image
element to load that speedometer image and you will thus will able to place it anywhere. Now, the pins can be made child of speedometerImage
element and can be centered to that of the speedometer (parent) usinganchors.centerIn
.
In this way it will be independent of any resolution changes. -