时间戳

首页 > 解决方案 > 是否有 Qt/QML 函数来检查形状是否已被单击？

qt - 是否有 Qt/QML 函数来检查形状是否已被单击？

问题描述

我正在尝试在形成六边形的 QML 形状中注册一次点击。我知道有

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

我正在尝试使用的属性。但我不知道如何进一步进行，因为我之前刚刚使用过 MouseAreas。

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

有谁知道如何使用这个？像 onClicked()-Handler 这样的东西会很好。

谢谢

标签： qtqmlqt5qqmlcomponent

解决方案

正如有关文档containsMode所说：

如果您添加Qt 快速输入处理程序并且您只想在鼠标或接触点完全位于形状内时做出反应，这很有用。

TapHandler您可以使用类似or的输入处理程序HoverHandler，它们使用其父级的 contains 方法。

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

推荐阅读