QML中增大MouseArea的控制区域
通常情况下,Mousearea的范围和可视组件的范围是一样的,但是有的时候可视组件太小,不好点,这时就希望能把MouseArea的范围变得大一点,在鼠标靠近可视组件的时候也能选中。方法很简单,不要使用anchor.fill=parent来设置Mousearea的范围,而使用anchors.centerIn: parent 来和可视组件中心对齐,然后再把Mousearea的范围扩大一点就可以了.
Rectangle {
id: root
width: 10
height: width
radius: width / 2
border.width: 1
border.color: "green"
signal posChange(int xOffset, int yOffset)
signal clicked(real x, real y)
signal doubleClicked(real x, real y)
onPosChange: {
x += xOffset
y += yOffset
}
MouseArea{
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width + 10
height: parent.height + 10
hoverEnabled: true
property int lastX: 0 // mouseX 是当前光标与root中心点的偏移量,在拖动的过程中要保持光标和root中心的偏移量不变
property int lastY: 0
onEntered: {
parent.border.color = "red"
}
onExited: {
parent.border.color = "blue"
}
onPressedChanged: {
if (containsPress) {
lastX = mouseX;
lastY = mouseY;
console.log("onPressedChange")
}
}
onPositionChanged: {
if (pressed) {
posChange(mouseX - lastX, mouseY - lastY)
//console.log("onPositionChanged" + mouseX + "," + mouseY)
}
}
onClicked: {
root.clicked(mouseX, mouseY)
}
onDoubleClicked: {
root.doubleClicked(mouseX, mouseY)
}
}
}