Qt基于Qml圆形头像定制

最新推荐文章于 2024-10-26 16:57:25 发布

自由软件开发者

最新推荐文章于 2024-10-26 16:57:25 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

分类专栏： QT编程文章标签： qt 开发语言

本文链接：https://blog.youkuaiyun.com/fittec/article/details/127592433

QT编程专栏收录该内容

148 篇文章

订阅专栏

博客主要演示了使用QtGraphicalEffects类，通过遮罩方式实现特定效果。包含目标图像层、遮罩层，还介绍了使用遮罩的方法，并给出了完整的qml源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示效果

主要用要QtGraphicalEffects类,通过遮罩方式来实现

1.目标图像层

//目标图像
    Image {
        id: sourceimage
        source: "qrc:/qt.png"
        sourceSize: Qt.size(parent.width, parent.height)
        fillMode: Image.PreserveAspectCrop
        smooth: true
        visible: false //默认不可见
    }

2.遮罩层

//遮罩层
    Rectangle {
        id: mask
        width: parent.width
        height: parent.height
        radius: width/2
        color:"red"
        visible: true //默认不可见
    }

3.使用遮罩

//透明遮罩-圆形
    OpacityMask {
        anchors.fill: mask //遮罩填充范围
        source: sourceimage //填充源
        maskSource: mask //遮罩源
    }

完整实现qml源码

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 96
    height: 96
    anchors.centerIn: parent
    //目标图像
    Image {
        id: sourceimage
        source: "qrc:/qt.png"
        sourceSize: Qt.size(parent.width, parent.height)
        fillMode: Image.PreserveAspectCrop
        smooth: true
        visible: false //默认不可见
    }
    Image {
        id: sourceimage1
        anchors.left: sourceimage.right
        anchors.leftMargin: 50
        source: "qrc:/qt.png"
        sourceSize: Qt.size(parent.width, parent.height)
        fillMode: Image.PreserveAspectCrop
        smooth: true
        visible: false //默认不可见
    }
    //遮罩层
    Rectangle {
        id: mask
        width: parent.width
        height: parent.height
        radius: width/2
        color:"red"
        visible: true //默认不可见

    }
    //透明遮罩-圆形
    OpacityMask {
        anchors.fill: mask //遮罩填充范围
        source: sourceimage //填充源
        maskSource: mask //遮罩源
    }
    //透明遮罩-椭圆
    OpacityMask {
        anchors.fill: sourceimage1 //遮罩填充范围
        source: sourceimage1 //填充源
        maskSource: mask //遮罩源
    }
}