HowTo position scaled Image Top/Left in Flickable in Page

ekkescorner

Have a Flickable sized to contained Image sourceSize
So at the beginning there's no scaling because Flickable covers total Image size
User can move the Image around and all is fine
Image is placed top/left in Flickable

Flickable {
        id: flickable
        property string name: "roomDetail"
        contentHeight: roomImage.height + 60 // some space for buttons at bottom
        contentWidth: roomImage.width
        anchors.fill: parent
            Image {
                id: roomImage
                anchors.top: parent.top
                anchors.left: parent.left
                width: sourceSize.width
                height: sourceSize.height
                fillMode: Image.PreserveAspectFit
                source: "qrc:/data-assets/conference/floorplan/room_"+room.roomId+".png"
                horizontalAlignment: Image.AlignLeft
                verticalAlignment: Image.AlignTop
            } 
    }

From some Buttons I can zoom-in / out and scale-to-fit into the window
To do this from Button clicked I set roomImage.scale
I also set flickable.contentX =0; flickable.contentY = 0
Scaling works fine, but the Image now isn't positioned at Top/Left from Flickable. Use has to drag it around to get it visible.
Any Idea what's wrong ?

jpnurmi

Hi ekke, the default transformOrigin is Item.Center. You can change it to Item.TopLeft.

ekkescorner

cool :)
now the image is always correct positioned and visible while zoom-in/out or fit-into-screen
QtCon2016 - Room Info to Session