How can I reuse a QML Scale element to scale incrementally around changing origins?

cpbotha

Dear all,

I've also posted this question on Stack Overflow: http://stackoverflow.com/questions/24478653/how-to-use-qml-scale-element-for-incremental-scaling-with-different-origin -- if you prefer that you can always respond there.

In any case, I'm trying to use a QML Scale Element to perform view scaling around a point clicked by the user. The user can change the zoom point by clicking elsewhere. I'm using a QML Scale Element and setting its origin based on the user's click position.

In the following minimal example, this works when you click your first point (try the center of the blue rectangle at top left). However, when you click on another point (try the center of the red rectangle) the zoom causes a translation jump. If you now click again on that second point (at its new position), zooming works as expected, until you want to zoom around a new point again. What am I doing wrong?

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

}

}
@

sierdzio

You are changing the scale before updating the origin.

And, as a side note: you can use "scale" property instead of "transform".

cpbotha

Tried both ways, no difference.
The documentation states to do it this way (i.e. with a Scale element and NOT the scale property), exactly because I need to scale around the user-clicked zoom point.

Any other ideas? :)

sierdzio

Ah sure, I somehow partially forgot about the zoom point thing ;P No, I don't have more ideas.