Circle Button 만들기

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 )