How can QML understand mouse movement?

[Yonetici]

Hello guys,

You know the fruit ninja. You can press anywhere and when you touch the fruit, animation plays. And if you know ActionScript 3.0, there is a hitTest to understand if it hit to another. In QML, how can we do this specific movement?

OR:

I want to draw a line: Touch screen, starts to draw a line to finish point which is point that you release touching.

Any idea?

Note: I'm using this following code but it works for only its own MouseArea and it's not what I need actually.


Item {
id: superrect
anchors.horizontalCenter: myItem.horizontalCenter
anchors.verticalCenter: myItem.verticalCenter
width: myItem.width+60
height: myItem.height+60

MouseArea {
id: mouse
anchors.fill: parent
//onEntered: console.log("mouse entered the area")
onExited: {
myItem.opacity= 0;
}
}
}

[wysota]

Have a MouseArea cover the whole touchable area and then test for a hit using a short javascript snippet that takes into account the current mouse position. Of course you need to know where your items are.

[Yonetici]

Have a MouseArea cover the whole touchable area and then test for a hit using a short javascript snippet that takes into account the current mouse position. Of course you need to know where your items are.

But the problem is that, when there are lots of items in the screen, it works for each item singly. And, it isn't my solution because of this.

[wysota]

I don't understand what you mean, sorry... I'm sure the solution I offered to you is the proper way to go.


Edit:

Somewhat silly example but it works:

import QtQuick 1.1

Rectangle {

property bool hit: false

function hitTest(posX, posY) {
// dirty hit test
if(posX >= obstacle.x && posY <= obstacle.x+obstacle.width
&& posY >= obstacle.y && posY <= obstacle.y+obstacle.height) {
root.hit = true
} else {
root.hit = false
}
}

id: root

width: 360
height: 360

MouseArea {
anchors.fill: parent
onPositionChanged: hitTest(mouse.x, mouse.y)
onReleased: root.hit = false
}

Rectangle {
id: obstacle
x: 200
y: 100
width: 50
height: width
radius: width/2
color: root.hit ? "red" : "blue"

Behavior on x {
NumberAnimation { duration: 500 }
}
Behavior on y {
NumberAnimation { duration: 500 }

}

}

Text {
visible: hit
text: "Collision detected"
anchors.left: parent.left
anchors.bottom: parent.bottom
}
Timer {
triggeredOnStart: true
interval: 500
running: true
onTriggered: {
obstacle.x = Math.max(0, Math.min(obstacle.x - 10 + Math.round(Math.random() *20), root.width))
obstacle.y = Math.max(0, Math.min(obstacle.y - 10 + Math.round(Math.random() *20), root.height))

}
repeat: true
}
}

[Yonetici]

thank you, I'll try

edit:
you are best! thank you it works :)

[wysota]

Just make a smarter hit test, checking the bounding rect might not be enough for a good user experience.