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"
}
}
}