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. Flickable and scale
Forum Updated to NodeBB v4.3 + New Features

Flickable and scale

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 3.6k Views 1 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.
  • H Offline
    H Offline
    habamax
    wrote on last edited by
    #1

    tl;dr. after scale contents of flickable have horizontal and vertical offsets.

    I try to implement flickable with pincharea to zoom in/out flickable's content and from documentation it looks fairly easy.
    @
    import QtQuick 2.2
    import QtQuick.Window 2.1

    import QtQuick.Controls 1.2

    Window {
    id: root
    visible: true
    width: 400
    height: 640
    color: "#EEE"

    Item {
        width: root.width
        height: root.height
    
        Flickable {
            id: flickable
            clip: true
            anchors.fill: parent
            contentWidth: board.width*board.scale
            contentHeight: board.height*board.scale
    
            Component.onCompleted: {
                contentX = contentWidth / 2 - root.width / 2
                contentY = contentHeight / 2 - root.height / 2
            }
    
    
            Rectangle {
                id: board
                width: 1000
                height: 1000
                color: "green"
            }
    
            PinchArea {
                id: pinchArea
                anchors.fill: parent
                pinch.target: board
                pinch.minimumScale: 0.8
                pinch.maximumScale: 2
                onPinchStarted: console.log("PINCH STARTED, SCALE", pinch.scale, pinch.previousScale)
                onPinchUpdated: console.log("PINCH UPDATED, SCALE", pinch.scale, pinch.previousScale)
                onPinchFinished: {
                    flickable.returnToBounds()
                    console.log("PINCH FINISHED, SCALE", pinch.scale, pinch.previousScale)
                }
            }
        }
    
        Column {
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: Screen.pixelDensity
            spacing: Screen.pixelDensity*3
    
            Button {
                id: btnZoomin
                text: "+"
                width: Screen.pixelDensity*10
                height: width
                onClicked: {
                    board.scale += 0.1
                    flickable.returnToBounds()
                }
            }
    
            Button {
                id: btnZoomout
                text: "-"
                width: Screen.pixelDensity*10
                height: width
                onClicked:  {
                    board.scale -= 0.1
                    flickable.returnToBounds()
                }
            }
        }
    
    }
    

    }
    @

    As my laptop has no multitouch I have added 2 buttons to zoom in and out (pincharea operates on scale too). As a result after scale green rectangle has vertical and horizontal offsets.

    I can't find a way to compensate those offsets or a way to do scaling properly.

    What should I do?

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi,

      Could "transform:Scale":http://qt-project.org/doc/qt-5/qml-qtquick-scale.html be useful to you ?
      You can set origin.x and origin.y values as 500 viz. is center of Rectangle.

      @
      Rectangle {
      id: board
      width: 1000
      height: 1000
      color: "green"
      transform: Scale { id: scale; origin.x: 500; origin.y: 500 }
      }
      @

      To use:

      @
      scale.xScale += 0.1
      scale.yScale += 0.1
      @

      157

      1 Reply Last reply
      0
      • H Offline
        H Offline
        habamax
        wrote on last edited by
        #3

        [quote author="p3c0" date="1406713166"]Hi,

        Could "transform:Scale":http://qt-project.org/doc/qt-5/qml-qtquick-scale.html be useful to you ?
        [/quote]

        Well, ideally I would like to pinch zoom stuff in Flickable. And pinch zoom operates on scale as far as I know

        1 Reply Last reply
        0
        • H Offline
          H Offline
          habamax
          wrote on last edited by
          #4

          [quote author="p3c0" date="1406713166"]Hi,

          @
          Rectangle {
          id: board
          width: 1000
          height: 1000
          color: "green"
          transform: Scale { id: scale; origin.x: 500; origin.y: 500 }
          }
          @

          To use:

          @
          scale.xScale += 0.1
          scale.yScale += 0.1
          @[/quote]

          The same behaviour. Try to zoom in (+) and drag the rectangle downright.

          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