qml圆形图片,qml圆形头像制作
代码比较简单,就不细讲了,大家直接看下面源码吧!如果对你有所帮助,可以帮角角点个关注嘛?
import QtQuick
import QtQuick.Effects
import Qt5Compat.GraphicalEffects
Window {
width: 640
height: 480
visible: true
title: qsTr("Round Image Test")
//原图片
Image {
id: bug
source: "img/111.jpg"
width: 200; height: 200
smooth: true
visible: false
}
//MaskSource
Rectangle {
id: mask
width: 200; height: 200; radius: width /2
smooth: true
visible: false
}
//Effect Applied
OpacityMask {
anchors.fill: bug
source: bug
maskSource: mask
}
//图片圆形外框
Rectangle {
width: 200; height: 200; radius: width /2
color: "transparent"
border.width: 6; border.color: "pink"
}
}
如果你的 Qt Creator 显示找不到 Qt5Compat.GraphicalEffects,请查阅我的上一篇文章:《qml找不到GraphicalEffects???》