CODEWITHSUNDEEP
qtqmlqt5qqmlcomponent
Zaragesh
Zaragesh

Reputation: 35

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

Upvotes: 1

Views: 1830

Answers (2)

GrecKo
GrecKo

Reputation: 7170

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

Upvotes: 2

JarMan
JarMan

Reputation: 8277

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();
            }
        }
    }
}

Upvotes: 0

Related Questions