QML圆角图片

最新推荐文章于 2025-07-04 14:51:08 发布

dofaster

最新推荐文章于 2025-07-04 14:51:08 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： qt 文章标签： QML 圆角椭圆头像图片

本文链接：https://blog.youkuaiyun.com/llmys/article/details/83547275

qt 专栏收录该内容

14 篇文章

订阅专栏

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

效果如下图所示:
在这里插入图片描述