qml圆形头像（一）—— 使用蒙板

圆形头像效果：

qml代码：

import QtQuick 2.3
import QtGraphicalEffects 1.0

Rectangle {
	id: img
	width: 150
	height: 150
	radius: width/2
	color: "black"

	Image {
		id: _image
		smooth: true
		visible: false
		anchors.fill: parent
		source: "images/dog.jpeg"
		antialiasing: true
	}
	Rectangle {
		id: _mask
		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
	}
}

增加半透明蒙版：

qml代码：

import QtQuick 2.3
import QtGraphicalEffects 1.0

Rectangle {
	id: img
	width: 150
	height: 150
	radius: width/2
	color: "black"

	Image {
		id: _image
		smooth: true
		visible: false
		anchors.fill: parent
		source: "images/dog.jpeg"
		antialiasing: true
	}
	Rectangle {
		id: _mask
		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
	}
	
	ColorOverlay {
		anchors.fill: img
		source: img
		color: Qt.rgba(35/255, 37/255, 45/255, 0.4)
	}
}

参考：
https://blog.csdn.net/qq_30042269/article/details/86616756
https://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html
https://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html

另外我的另一篇博客中实现的抗锯齿效果更好：https://blog.csdn.net/hp_cpp/article/details/100126238