Use QML to realize the method of irregular disc, cut the picture to realize
Since the shape of the disk is irregular, the simpler implementation method is to realize it by cutting the image. In the clicked event, add a sentence to replace the image, and it can be realized.
The upper sector is a picture, and the lower circle is also a picture. Through two Rectangles, an Image element is placed, and the background picture is replaced when clicked.
The key point is how to realize the onclicked event of each partition of the sector.
I realized it through positioning. I need to put an element with a picture above and a word below in each partition, so first implement such an element, and then use it to set different pictures and text.
Rectangle
{
id:root
z:1
property alias text : text .text //This setting can easily change the text of the text
property alias imagesource : image .source //Set different pictures
property alias textcolor : text .color //Set text color
property alias textsize : text .font.pixelSize //Set text size
signal clicked // Set the click event for easy reference
color : "#00000000" // set transparent color for background
Rectangle
{
id:imageup
width: root.width
height:(root.height*3)/5
color: "#00000000"
anchors.horizontalCenter : parent .horizontalCenter//Set the element to be horizontally centered with the parent element.
Image {
z:2
id: image
anchors.fill : parent// fill the entire parent element
}
}
Rectangle
{
y:imageup.height
width: root.width
height: (root.height*2)/5
color: "#00000000"
anchors.horizontalCenter:parent.horizontalCenter
Text {
z:2
id: text
font.pixelSize: 14
anchors.centerIn:parent
color: "#ffffffff"
}
}
MouseArea
{
anchors.fill: parent
onClicked:
{
root .clicked();//When referencing the custom element, you can use the onclick event.
}
}
}
The following is to realize the positioning of the upper and lower word elements in the circle and six sectors, and click to change the background.
Rectangle
{
id:pie
width: 200
height: 200
color : Qt .rgba(0.5,0.5,0.5,0.0)//transparent, and the transparency is 0
border.color: "#00000000"
x:400
y :800 //Positioning the element position
radius: 100
z:3
Image {
z:4
id: pieimage
anchors.fill: parent
source : "/pie/back-min.png"//Initial background image
}
PieButton
{
z:7
x:80
y:5
width: 35
height:60
imagesource : "/pie/HDMI-min.png" // image
text : qsTr ( " signal source" )//text is "signal source"
onClicked:
{
pieimage .source = "/pie/hdmi-bg.png"//Switch the background image when clicked
}
}
PieButton
{
z:7
x:80
y:133
width: 35
height:60
imagesource:"/pie/CUT-min.png"
text : qsTr ( " Screenshot" )
onClicked:
{
pieimage.source = "/pie/cut-bg.png"
}
}
PieButton
{
z:7
x:135
y:35
width: 35
height:60
imagesource:"/pie/keyboard-min.png"
text : qsTr ( " Keyboard" )
onClicked:
{
pieimage.source = "/pie/keyboard-bg.png"
}
}
PieButton
{
z:7
x:135
y:100
width: 35
height:60
imagesource:"/pie/whiteboard-min.png"
text : qsTr ( " whiteboard" )
onClicked:
{
pieimage.source = "/pie/whiteboard-bg.png"
}
}
PieButton
{
z:7
x:25
y:35
width: 35
height:60
imagesource:"/pie/HOME-min.png"
text : qsTr ( " Homepage" )
onClicked:
{
pieimage.source = "/pie/home-bg.png"
}
}
PieButton
{
z:7
x:25
y:100
width: 35
height:60
imagesource:"/pie/PEN-min.png"
text : qsTr ( " Comment" )
onClicked:
{
pieimage.source = "/pie/pen-bg.png"
}
}
Rectangle // The implementation of the small circle in the middle
{
z:5
anchors.centerIn: parent
width: 66
height: 66
radius: 33
color: "#00000000"
Image {
z:6
id: multitaskimage
anchors.fill: parent
source: "/pie/Multitask-back-min.png"
}
PieSource
{
z:7
width: 50
height: 40
anchors.centerIn: parent
imagesource:"/pie/Multitask-min.png"
textsize: 12
textcolor: "steelblue"
text : qsTr ( " multitasking" )
onClicked:
{
}
}
}
}