circleButton.tar.gz
원형 버튼을 만들 경우 가장 신경쓰이는게 MouseArea이다.
Rectangle에 property인 radius에 적당한 값을 주면 Rectangle의 각 모서리는 원형을 띄게 된다.
radius 값의 조절로 원형 버튼을 만들 수 있다.
이 때 중요한 것은 MouseArea 로 부모 Ractanlge에 anchors fill을 조면 원형 밖의 영역도 마우스 이벤트를 가지게 된다.
첨부되어 있는 소스를 다운받아 실행 시키면 원형의 영역에만 마우스 이벤트를 줄 수 있다.
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()
}
}
|
import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640; height: 480;
title: qsTr("Hello World")
MainForm {
anchors.fill: parent
mouseArea.onClicked: {
console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
}
}
Rectangle {
id: circleBt
x: 50; y:50; width: 100; height: 100
color: roundMouseArea.pressed ?
"red" : (roundMouseArea.containsMouse ? "darkorange" : "transparent")
radius: width/2
border.color: "darkorange"
RoundMouseArea {
id: roundMouseArea
anchors.fill: parent
onClicked: print("clicked")
}
}
}
|
출처 stack overflow( https://stackoverflow.com/questions/38164074/how-to-create-a-round-mouse-area-in-qml )
댓글 없음:
댓글 쓰기