QML语言实现圆形图片头像

红色代码为实现圆形图片头像代码

import QtQuick 2.0
import com.syberos.basewidgets 2.0
import QtGraphicalEffects 1.0

CPageStackWindow {
initialPage: CPage {

    id: mainPage
    width:720
    height:1280

    Rectangle{
        width:720
        height:150
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.horizontalCenter: parent.horizontalCenter
        color: "blue"

        Rectangle {
            id: img

            anchors.top: parent.top
            anchors.topMargin: 70
            anchors.left: parent.left
            anchors.leftMargin: 30
            width: 70
            height: 70
            radius: width/2
            color: "black"
            Image {
                id: _image
                smooth: true
                visible: false
                anchors.fill: parent
                source: "../image/DF.png"
                sourceSize: Qt.size(70, 70)
                antialiasing: true
            }
            Rectangle {
                id: _mask
                color: "black"
                anchors.fill: parent
                radius: width/2
                visible: false
                antialiasing: true
                smooth: true
            }
            OpacityMask {
                id:mask_image
                anchors.fill: _image
                source: _image
                maskSource: _mask
                visible: true
                antialiasing: true
            }
        }

        Text{
            id: yhm
            width: 150;
            height: 50
            anchors.top: parent.top
            anchors.topMargin: 90
            anchors.left: parent.left
            anchors.leftMargin: 110
            text: "hades"
            font.pixelSize: 30
            color: "white"
        }
        Image {
            id: sz
            width: 50;
            height: 50
            anchors.top: parent.top
            anchors.topMargin: 80
            anchors.right: parent.right
            anchors.rightMargin: 30
            source:  "../image/SZ.png"
        }
    }

    Image {
        id: bt
        anchors.top: parent.top
        anchors.topMargin: 150
        anchors.horizontalCenter: parent.horizontalCenter
        width: 600;
        height: 300
        source:  "../image/BT.png"
    }

扫描二维码关注公众号，回复： 3824015 查看本文章

}
}