QML圆角图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/llmys/article/details/83547275

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

效果如下图所示: