title: How to use QML Scale Element for incremental scaling with different origin
body: <p>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.</p>
  
  <p>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:</p>
  
  <ul>
  <li>Click in the center of the blue rectangle at the top left.</li>
  <li>See that everything is scaled up, but the center of the blue rectangle remains at your click location. This is as documented in <a href="http://doc.qt.io/qt-5/qml-qtquick-scale.html" rel="nofollow noreferrer">http://doc.qt.io/qt-5/qml-qtquick-scale.html</a> - "[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)."</li>
  <li>Now click in the center of the red rectangle.</li>
  <li>See that everything is scaled up, but the center of the red rectangle did <strong>not</strong> remain at your click point, it was translated up and to the left. This is not as documented.</li>
  </ul>
  
  <p>My goal is to have it <strong>always</strong> zoom correctly maintaining the click point as the origin, as stated in the documentation.</p>
  
  <p>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>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. Many applications have exactly this behaviour. See for example inkscape.</p>
  
  <pre><code>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"
          }
  
      }
  
  }
  </code></pre>
  
  <p>(I filed this as a Qt bug, because the behaviour does not follow the documentation. At the moment of writing, the bug seems to have been triaged as "important". <a href="https://bugreports.qt.io/browse/QTBUG-40005" rel="nofollow noreferrer">https://bugreports.qt.io/browse/QTBUG-40005</a> - I'm still very much open to suggestions of work-arounds / fixes over here)</p>