用QML实现不规则圆盘的方法

用QML实现不规则圆盘的方法，切图实现

 

由于圆盘的形状是不规则的，比较简单的实现方法是通过切图的方式来时实现，在clicked事件里面，添加替换图片的语句，就可以实现。

上面的扇形是，图片，下面的圆形也是图片，通过两个Rectangle，放入一个Image元素，点击时替换背景图片。

重点是如何实现扇形每个分区的onclicked事件。

我是通过定位实现的，我的每个分区中需要放入一个上图下字的元素，所以先实现一个这样的元素，然后使用它来设置不同的图片和文字。

Rectangle

{

    id:root

    z:1

    property alias text: text.text  //这样设置可以方便更改text的文字

    property alias imagesource: image.source //设置不同图片

    property alias textcolor: text.color //设置文字颜色

    property alias textsize:text.font.pixelSize //设置文字大小

    signal     clicked //设置点击事件，方便引用

    color: "#00000000" //背景设置透明色

    Rectangle

    {

        id:imageup

        width: root.width

        height:(root.height*3)/5

        color: "#00000000"

        anchors.horizontalCenter:parent.horizontalCenter//设置元素与父元素水平居中。

    Image {

        z:2

        id: image

        anchors.fill: parent//填充整个父元素

          }

    }

    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();//引用该自定义元素时，可以在使用onclick事件。

        }

    }

}

下面是实现圆形及六个扇形中对上图下字元素的定位，及点击是改变背景。

Rectangle

    {

        id:pie

        width: 200

        height: 200

        color: Qt.rgba(0.5,0.5,0.5,0.0)//透明，并且透明度为0

        border.color: "#00000000"

        x:400

        y:800 //定位元素位置

        radius: 100

        z:3

        Image {

            z:4

            id: pieimage

            anchors.fill: parent

            source: "/pie/back-min.png"//初始时背景图片

        }

        PieButton

        {

            z:7

            x:80

            y:5

            width: 35

            height:60

            imagesource:"/pie/HDMI-min.png" //图片

            text:qsTr("信号源")//文字为“信号源”

            onClicked:

            {

             pieimage.source = "/pie/hdmi-bg.png"//点击时切换背景图片

            }

        }

        PieButton

        {

            z:7

            x:80

            y:133

            width: 35

            height:60

            imagesource:"/pie/CUT-min.png"

            text:qsTr("截屏")

            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("键盘")

            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("白板")

            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("主页")

            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("批注")

            onClicked:

            {

               pieimage.source = "/pie/pen-bg.png"

            }

        }

        Rectangle  //中间小圆形的实现

        {

            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("多任务")

               onClicked:

               {

               }

            }

        }

}