Important: Please read the Qt Code of Conduct -

HowTo position scaled Image Top/Left in Flickable in Page

  • Qt Champions 2016

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

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

  • Qt Champions 2016

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