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