Is there a Qt/QML function to check if a shape has been clicked?

Question

I am trying to register a click in a QML Shape which forms a hexagon. I know there is the

Shape.FillContains() https://doc.qt.io/qt-5/qml-qtquick-shapes-shape.html#containsMode-prop

property which I am trying to use. But I do not know how to proceed further because I have just worked with MouseAreas before.

import QtQuick 2.15
import QtQuick.Shapes 1.15
import QtQuick.Extras 1.4

Item
{
    id: root
    property real srh //ScaleFactor
    Shape
    {
        id: rootShape
        width:  srh * (6.5 - 0.5)
        height: srh * 5.2
        anchors.centerIn: parent
        containsMode: Shape.FillContains

        ShapePath
        {
            id: myHexagon
            strokeWidth: 4
            strokeColor: "white"
            fillColor: "steelblue"

            //Path
            startX:         2 * srh;
            startY:                     0   * srh
            PathLine { x: 5   * srh; y: 0   * srh }
            PathLine { x: 6.5 * srh; y: 2.6 * srh }
            PathLine { x: 5.0 * srh; y: 5.2 * srh }
            PathLine { x: 2.0 * srh; y: 5.2 * srh }
            PathLine { x: 0.5 * srh; y: 2.6 * srh }
            PathLine { x: 2   * srh; y: 0   * srh }
        }
}

Does anyone know how to work with this? Something like the onClicked()-Handler would be nice.

Thanks

score 2 · Accepted Answer · answered Aug 19 '20 at 19:51

As the documentation about containsMode says :

It is useful in case you add Qt Quick Input Handlers and you want to react only when the mouse or touchpoint is fully inside the Shape.

You can use an input handler like TapHandler or HoverHandler, they use the contains method of their parent.

Shape {
    id: rootShape
    width:  srh * (6.5 - 0.5)
    height: srh * 5.2
    anchors.centerIn: parent
    containsMode: Shape.FillContains

    ShapePath {
        id: myHexagon
        strokeWidth: 4
        strokeColor: "white"
        fillColor: hoverHandler.hovered ? "gold" : "steelblue"

        //Path
        startX:         2 * srh;
        startY:                     0   * srh
        PathLine { x: 5   * srh; y: 0   * srh }
        PathLine { x: 6.5 * srh; y: 2.6 * srh }
        PathLine { x: 5.0 * srh; y: 5.2 * srh }
        PathLine { x: 2.0 * srh; y: 5.2 * srh }
        PathLine { x: 0.5 * srh; y: 2.6 * srh }
        PathLine { x: 2   * srh; y: 0   * srh }
    }
    HoverHandler {
        id: hoverHandler
    }
    TapHandler {
        onTapped: print("Hexagon clicked")
    }
}

thanks @GrecKo I was a little bit confused with the containsMode. — Zaragesh, Aug 20 '20 at 10:10
Do you know how to change the HoverHandler so that I can execute Code like in onTapped {... } sometehing like onHovered: {...} but I cant find something in the documentation just canceled() and grabChanged() which is not really helpful. The fillColor: hoverHandler.hovered ? "gold" : "steelblue" is pretty good but I need to execute a little bit more code on hovering — Zaragesh, Aug 20 '20 at 12:24
This works: HoverHandler { id: myHover onHoveredChanged: { if(hovered) { } else { } } } — Zaragesh, Aug 20 '20 at 13:38

score 0 · Answer 2 · answered Aug 19 '20 at 13:08

The docs you link to already seem to point to the answer. Have you tried combining containsMode with a MouseArea?

Shape 
{
    id: shape
    signal clicked()

    containsMode: Shape.FillContains

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            if (shape.contains(Qt.point(mouseX, mouseY)))
            {
                shape.clicked();
            }
        }
    }
}

Is there a Qt/QML function to check if a shape has been clicked?

2 Answers2