Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-40005

QML Scale Element causes undocumented translation when origin is changed

    XMLWordPrintable

Details

    • Bug
    • Resolution: Invalid
    • P2: Important
    • None
    • 5.3.1
    • None
    • Ubuntu 14.04 x86_64, Qt 5.3.1 open source

    Description

      I'm trying to use a QML Scale Element to perform view scaling around a point clicked by the user, but it's not always working as documented.

      To reproduce the problem, run the minimal QML example below (I'm using Qt 5.3.1 on Ubuntu 14.04 x86_64) and then:

      • Click in the center of the blue rectangle at the top left.
      • See that everything is scaled up, but the center of the blue rectangle remains at your click location. This is as documented in http://qt-project.org/doc/qt-5/qml-qtquick-scale.html - "[The origin] holds the point that the item is scaled from (that is, the point that stays fixed relative to the parent as the rest of the item grows)."
      • Now click in the center of the red rectangle.
      • See that everything is scaled up, but the center of the red rectangle did not remain at your click point, it was translated up and to the left. This is not as documented.

      My goal is to have it always zoom correctly maintaining the click point as the origin, as stated in the documentation.

      P.S. Interestingly, if you now click again in the center of the red rectangle, it scales up around that point as promised. Clicking again now on the center of the blue rectangle, you see the same unexpected translation behaviour.

      P.P.S. I'm working on an application where the user can mouse-wheel / pinch anywhere on the containing rectangle, and everything inside should scale up or down around the mouse / pinch position.

          import QtQuick 2.2
          import QtQuick.Controls 1.1
          
          ApplicationWindow {
              visible: true
              width: 640
              height: 480
              title: qsTr("Hello World")
          
              Rectangle {
                  x: 100
                  y: 100
                  width: 300
                  height: 300
          
                  transform: Scale {
                      id: tform
                  }
          
                  MouseArea {
                      anchors.fill: parent
                      onClicked: {
                          console.log(mouse.x + " " + mouse.y)
                          tform.xScale += 0.5
                          tform.yScale += 0.5
                          tform.origin.x = mouse.x
                          tform.origin.y = mouse.y
                      }
                  }
          
                  Rectangle {
                      x: 50
                      y: 50
                      width: 50
                      height: 50
                      color: "blue"
                  }
          
                  Rectangle {
                      x: 100
                      y: 100
                      width: 50
                      height: 50
                      color: "red"
                  }
          
              }
          
          }
      

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            sletta Gunnar Sletta
            cpbotha Charl Botha
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes