qtqmlqt5qqmlcomponent

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


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


Solution

  • 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")
        }
    }