How to use QML Scale Element for incremental scaling with different origin

Question

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://doc.qt.io/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. Many applications have exactly this behaviour. See for example inkscape.

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

    }

}

(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". https://bugreports.qt.io/browse/QTBUG-40005 - I'm still very much open to suggestions of work-arounds / fixes over here)

What is the expected behaviour? It's not clear what you want to happen. — Mitch, Jun 30 '14 at 15:36
When you click in the centre of a coloured rectangle, it should increase in size symmetrically around that point. This works when you click the first rectangle, but gives unwanted behaviour when you click the centre of the other one for the first time. I'll expand my question to explain this better. The problem is clear when you try the example. — Charl Botha, Jun 30 '14 at 15:54
Hi Mitch, I've tried to improve my explanation. Is it clear now? I would be grateful if you could take another look! — Charl Botha, Jun 30 '14 at 18:22
I wish the docs were more clear about the order of operations on the transform. That said, if you set hoverEnabled to true on the MouseArea, then bind tform's originX and orignY to the MouseArea's mouseX and mouseY, it seems to have the desired zoom behavior, but not the same scroll behavior. That's frustrating, but it might be another path to explore. — MrEricSir, Jul 25 '14 at 06:55
I just tried your suggestions, but MouseArea.mouseX,Y is identical to mouse.{x,y} I'm already using, and so I'm seeing exactly the same deviant behaviour when I click first on the center of the blue rectangle and then on the center of the red rectangle. — Charl Botha, Jul 25 '14 at 08:25

score 9 · Answer 1 · answered Dec 09 '14 at 10:44

In fact it is not a deviant behavior, just a different one from what you may expect after reading the doc.

When you change the Scale transform of your rectangle, the transformation is applied on the original rectangle. The point you click on stay in the same place from the original rectangle point of view. That's why your rectangle "moves" so much when you click on one corner then the opposite corner.

In order to achieve what you want, you can't rely on transform origin. You have to set the actual x y coordinates of your rectangle.

Here's a working example:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        x: 100
        y: 100
        width: 300
        height: 300

        Rectangle {
                x: 50
                y: 50
                width: 50
                height: 50
                color: "blue"
            }

            Rectangle {
                x: 100
                y: 100
                width: 50
                height: 50
                color: "red"
            }


        transform: Scale {
            id: tform
        }

        MouseArea {
            anchors.fill: parent
            property double factor: 2.0
            onWheel:
            {
                if(wheel.angleDelta.y > 0)  // zoom in
                    var zoomFactor = factor
                else                        // zoom out
                    zoomFactor = 1/factor   

                var realX = wheel.x * tform.xScale
                var realY = wheel.y * tform.yScale
                rect.x += (1-zoomFactor)*realX
                rect.y += (1-zoomFactor)*realY
                tform.xScale *=zoomFactor
                tform.yScale *=zoomFactor

            }
        }
    }
}

How to use QML Scale Element for incremental scaling with different origin

1 Answers1