QML MouseArea学习小结

QML中的MouseArea类型为用户进行简单的鼠标操作提供了方便。

MouseArea是一个不可见的Item，通常与可见项目结合使用，以便为该项目提供鼠标处理。通过有效地充当代理，鼠标处理的逻辑可以包含在MouseArea Item中。

MouseArea虽然是一个不可见的Item，但是它有一个“visible”属性，当该属性为假时，鼠标区域就对鼠标事件变得透明。

MouseArea使用实例：

main.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

Window
{
    id : window
    visible : true
    width :
    height :
    title : qsTr("Mouse Area")

Rectangle
    {
        id : rect
        anchors.left : window.left
        anchors.leftMargin :
        width : ;
        height :
        color : "green"

MouseArea
        {
            anchors.fill : parent
            onClicked :
            {
                parent.color = 'red';
            }
        }
    }

Rectangle
    {
        id : roundrect
        anchors.left : rect.right
        anchors.leftMargin :
        width : ;
        height :
        color : "red"
        radius :

MouseArea
        {
            anchors.fill : parent
            onClicked :
            {
                parent.color = 'green'
            }
        }
    }
}

常规测试实验证实，MouseArea有一个矩形的形状区域，这就会导致一些不是矩形形状的Item不能有效地获取实际形状的鼠标操作区域。如圆角矩形，在圆形按钮周围的假想方块的角落的鼠标操作也会被捕获，这显然不符合精准拾取的现实。

进阶地，文章“How to create a round mouse area in QML“提供了一种圆形鼠标区域RoundMouseArea：

RoundMouseArea.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Item {
id: roundMouseArea

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

property bool containsMouse: {
        ;
        ;
        var x2 = mouseX;
        var y2 = mouseY;
        );
        );
        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()
    }
}

main.qml中使用：

main.qml片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

RoundMouseArea {
    id : roundMouseArea
    width :
    height :
    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 /
        anchors.fill : parent
    }
}

我们可以根据需要重写containsMouse来规定自己的鼠标区域，但是需要计算不同区域的数学知识，需要一定的功底。

再进一步，应该把鼠标区域一般化，可以使用任意的路径形状来表示才好。Qt自带一个例子maskedmousearea，此示例提供了一种使用任何形状的Mask的方法，它可以根据您的需求进行定制。

先睹为快：

该demo是一个异形窗口，主要展示鼠标在和异形区域交互的使用，如上图所示，当鼠标移动到白云或者月亮上时，相应的物体会高亮，当鼠标按下时，物体会有一个放大的动画效果，鼠标离开时恢复原样。

class MaskedMouseArea : public QQuickItem

核心主要时判断鼠标点是否在图片有效区域内：

C++ Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

bool MaskedMouseArea::contains(const QPointF &point) const
{
if (!QQuickItem::contains(point) || m_maskImage.isNull())
return false;

QPoint p = point.toPoint();

|| p.x() >= m_maskImage.width() ||
p.y() < || p.y() >= m_maskImage.height())
return false;

qreal r = qBound<);
//根据alpha值判断异形区域
return qAlpha(m_maskImage.pixel(p)) > r;
}

qml Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Image {
    id : moon
    anchors.centerIn : parent
    scale : moonArea.pressed ?
    opacity : moonArea.containsMouse ?
    source : Qt.resolvedUrl("images/moon.png")

MaskedMouseArea {
        id : moonArea
        anchors.fill : parent
        alphaThreshold :
        maskSource : moon.source
    }

Behavior on opacity {
        NumberAnimation {
            duration :
        }
    }
    Behavior on scale {
        NumberAnimation
        {
            duration :
        }
    }
}

gif走起来：

巴特西

QML MouseArea学习小结

最新文章

热门文章