How do I change imagesize to fit on other screens and preserve aspect ratio

antemort

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

p3c0

@antemort So why don't you use anchors.centerIn: parent and align it to center according to the gauge ? Here parent being the gauge.

antemort

because the gauge circle have the measure 1440x540 like the rest of the images there are two cirles in one circle. If i use anchors.centerIn it will end up in the center of the image in between those circles.

p3c0

@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's x and y 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 ?

antemort

two circles in one image*

p3c0

@antemort A small pictorial representation would be helpful.

antemort

http://postimg.org/image/62lrab1jt/

here it is. Print screen from Qt designer with pins in right position

p3c0

@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 speedometer Image element and can be centered to that of the speedometer (parent) using anchors.centerIn.
In this way it will be independent of any resolution changes.

antemort

I had it before but then I needed to position all images and then I couldn't anchor them. when I don't anchor them they doesn't scale or follow the window when it scales.

p3c0

@antemort You can put the 2 gauge images besides eachother inside a RowLayout and add it to the Image element which contains that background image. Advantage of layouts is that it automatically positions the items inside it when it resizes.