QML圆角图片可以使用OpacityMask来实现,具体可以查看Qt的文档“OpacityMask”,其中圆角图片实现如下:OpacityMask中的source表示你要显示的图片,maskSource表示将图片固定在此区域内显示。
CircularImage.qml
import QtQuick 2.6
import QtGraphicalEffects 1.0
Rectangle {
property string img_src
radius: width / 2
Image {
id: _image
smooth: true
visible: false
anchors.fill: parent
source: img_src
sourceSize: Qt.size(parent.size, parent.size)
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
}
}
在test_image.qml中使用:
import QtQuick 2.6
Rectangle {
width: 200
height: 200
color: "green"
CircularImage {
x:90
y:90
width: 32
height: 32
img_src: "11.jpg"
}
}
效果如下图所示: