[Solved] Flickering rectangle during resizing

ihaveajob

Hello, I'm pretty new to Qt Quick, so hopefully this will be obvious to someone here. I'm trying to have one big rectangle anchored to the top-left of the main view, and to a second, smaller rectangle (named "cross") on the opposite (bottom right) corner. The smaller rectangle can be dragged with the mouse. It does work, sort of, with 2 problems:

The resizing is very flickering and it shows a ghost copy of the same rectangle
The resizing happens at about half the speed with which I move the mouse

Here's my code, simplified:
@import QtQuick 1.0

Rectangle {
width: 360
height: 360

Rectangle {
    id : cross
    x: 274
    y: 265
    width: 44 ; height: 44 ; z: 1
    color: "blue"
    MouseArea {
        anchors.fill: parent
        onPositionChanged: {
            console.log("\ncross: " + cross.x + ", " + cross.y)
            console.log("mouse: " + mouseX + ", " + mouseY)
            cross.x = mouseX
            cross.y = mouseY
        }
    }
}

Rectangle {
    id: q1
    color: "grey"
    anchors.left: parent.left
    anchors.right: cross.horizontalCenter
    anchors.top: parent.top
    anchors.bottom: cross.verticalCenter
    Text { text: "centered text" ; anchors.centerIn: parent }
}

}
@

mlong

On lines 18 and 19 use:

@
cross.x += mouseX
cross.y += mouseY
@

ihaveajob

Thanks mlong! Of course the mouse coordinates are relative to the MouseArea, no the whole screen... This is interesting. I'm guessing the flickering was caused by the mouseX property taking the values of Rectangle "cross" and its parent, alternatively. Is that correct?

Also, I'm making the Rectangle's center follow the mouse with this:
@ cross.x += mouseX - cross.width/2
cross.y += mouseY - cross.height/2
@

mlong

Great! Glad it's working.

Please be sure and edit your the thread's title and add [Solved] at the beginning.