Qt World Summit: Register Today!

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
    		    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 ...


    • 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
           mouseEnabled:false /*here it is, epic ! */
               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

Log in to reply