如何在 QML 中创建圆形鼠标区域

问题描述

我有一个基本的自定义按钮，使用带有 radius: width/2 的矩形.现在我添加一个 MouseArea 到我的按钮.然而 MouseArea 有一个方形的形状.这意味着当我在圆形按钮之外稍微点击时也会触发点击事件，即在圆形按钮周围的假想正方形的角落.我可以以某种方式制作 MouseArea 回合吗?

 导入 QtQuick 2.7导入 QtQuick.Window 2.2窗户 {可见:真实宽度:640高度:480标题:qsTr("TestApp")长方形 {id:背景anchors.fill:父级颜色:Qt.rgba(0.25, 0.25, 0.25, 1);长方形 {id:按钮宽度:64身高:64颜色:透明"anchors.centerIn:父级半径:32边框宽度:4边框颜色:灰色"鼠标区域{anchors.fill:父级onPressed: button.color = "red";onReleased: button.color = "transparent";}}}}

解决方案

从

I have a basic custom button using a Rectangle with radius: width/2. Now I add a MouseArea to my button. However the MouseArea has a squared shape. That means the click event is also triggered when I click slightly outside the round button, i.e. in the corners of the imaginary square around the round button. Can I somehow make also the MouseArea round?

  import QtQuick 2.7
  import QtQuick.Window 2.2

  Window {
      visible: true
      width: 640
      height: 480
      title: qsTr("TestApp")

      Rectangle {
          id: background
          anchors.fill: parent
          color: Qt.rgba(0.25, 0.25, 0.25, 1);


          Rectangle {
              id: button
              width: 64
              height: 64
              color: "transparent"
              anchors.centerIn: parent
              radius: 32
              border.width: 4
              border.color: "grey"

              MouseArea {
                  anchors.fill: parent
                  onPressed: button.color = "red";
                  onReleased: button.color = "transparent";
              }
          }

      }
  }

解决方案

Stealing code from PieMenu, here's RoundMouseArea.qml:

import QtQuick 2.0

Item {
    id: roundMouseArea

    property alias mouseX: mouseArea.mouseX
    property alias mouseY: mouseArea.mouseY

    property bool containsMouse: {
        var x1 = width / 2;
        var y1 = height / 2;
        var x2 = mouseX;
        var y2 = mouseY;
        var distanceFromCenter = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
        var radiusSquared = Math.pow(Math.min(width, height) / 2, 2);
        var isWithinOurRadius = distanceFromCenter < radiusSquared;
        return isWithinOurRadius;
    }

    readonly property bool pressed: containsMouse && mouseArea.pressed

    signal clicked

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: if (roundMouseArea.containsMouse) roundMouseArea.clicked()
    }
}

You can use it like this:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 640
    height: 480
    visible: true

    RoundMouseArea {
        id: roundMouseArea
        width: 100
        height: 100
        anchors.centerIn: parent

        onClicked: print("clicked")

        // Show the boundary of the area and whether or not it's hovered.
        Rectangle {
            color: roundMouseArea.pressed ? "red" : (roundMouseArea.containsMouse ? "darkorange" : "transparent")
            border.color: "darkorange"
            radius: width / 2
            anchors.fill: parent
        }
    }
}

这篇关于如何在 QML 中创建圆形鼠标区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！