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



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

    }
    @


  • Moderators

    You are changing the scale before updating the origin.

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



    1. Tried both ways, no difference.
    2. 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? :)


  • Moderators

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.