MultiPointTouchArea and irregulars button shapes
-
Hi everyone, i'm actually working on an app for desktop touchscreen monitor where the user should be able to touch multiple button (or call this touchable areas maybe) of different shapes at the same time.
The MultiPointTouchArea of Qtquick is very usefull and allow me to do a lot of things like obtain touchpoints of multiple fingers input etc. but .. only one things stuck : i don't find a way to manage something else but rectangle hitbox for my buttons (and yeah a really need thing like round or whatever shapes)
Here is a sample of my code:
(this how a detect fingers positions and manage events)MultiPointTouchArea { anchors.fill: parent maximumTouchPoints:10; Rectangle{ x:100 objectName: "MYZONE" height: 100 width: 100 color: "green" } onPressed: { var obj = childAt(touchPoints[0].startX-parent.x,touchPoints[0].startY-parent.y); if(obj != null){ if(obj.objectName === "MYZONE"){ console.log("touch :"+obj.objectName) } } } }
This work great but still a really would like to have something else than rectangle shape.
i tried this too :
[https://github.com/cedrus/qt/tree/master/qtdeclarative/examples/quick/customitems/maskedmousearea](link url)
It works well, but this custom QquickItem isn't a MultiPointTouchArea, it's more like a MouseArea, so i can't have multiple finger input on my touchscreen ...
So,
- Is there a way to define something else than rectangle "hitbox" in qml? something else than QImage or Qrectangle or whatever ?
- Should i use c++ approach than QML ? :(
-
Ok i found the solution.
I just set the parameter mouseEnabled:false of my MultiPointTouchArea.
Qt doc =>
"By default, the mouse will be handled the same way as a single touch point, and items under the touch area will not receive mouse events because the touch area is handling them. But if the mouseEnabled property is set to false, it becomes transparent to mouse events so that another mouse-sensitive Item (such as a MouseArea) can be used to handle mouse interaction separately."My bad, didnt read it correctly at first time :D
And it's works with the maskedmousearea, nice !
here is the sample :
MultiPointTouchArea { anchors.fill: parent maximumTouchPoints:10; mouseEnabled:false /*here it is, epic ! */ Image{ width: 300; height: 300 id: myimage; source: "img/img.png" MaskedMouseArea { anchors.fill: parent alphaThreshold: 0.4 maskSource: myimage.source onPressed: { Console.log("win !") } } } }
-i can know have toucharea with shape of images alpha channels => win
-i can get rid of the childAt function => win
-i can proceed to the next step of my work => win