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

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
  • 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.
  • E Offline
    E Offline
    ekkescorner
    Qt Champions 2016
    wrote on 30 Jul 2016, 15:26 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
    • J Offline
      J Offline
      jpnurmi
      wrote on 1 Aug 2016, 06:54 last edited by jpnurmi 8 Jan 2016, 06:55
      #2

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

      1 Reply Last reply
      0
      • E Offline
        E Offline
        ekkescorner
        Qt Champions 2016
        wrote on 1 Aug 2016, 07:17 last edited by ekkescorner 8 Jan 2016, 07:17
        #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

        1/3

        30 Jul 2016, 15:26

        • Login

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