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" } } }