Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. HowTo position scaled Image Top/Left in Flickable in Page
Forum Updated to NodeBB v4.3 + New Features

HowTo position scaled Image Top/Left in Flickable in Page

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qtquickcontrolsimagepositioning
3 Posts 2 Posters 2.1k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ekkescornerE Offline
    ekkescornerE Offline
    ekkescorner
    Qt Champions 2016
    wrote on last edited by
    #1

    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 ?

    ekke ... Qt Champion 2016 | 2024 ... mobile business apps
    5.15 --> 6.8 https://t1p.de/ekkeChecklist
    QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

    1 Reply Last reply
    0
    • jpnurmiJ Offline
      jpnurmiJ Offline
      jpnurmi
      wrote on last edited by jpnurmi
      #2

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

      1 Reply Last reply
      0
      • ekkescornerE Offline
        ekkescornerE Offline
        ekkescorner
        Qt Champions 2016
        wrote on last edited by ekkescorner
        #3

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

        ekke ... Qt Champion 2016 | 2024 ... mobile business apps
        5.15 --> 6.8 https://t1p.de/ekkeChecklist
        QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved