当前位置：首页 > article >正文

qml圆形图片，qml圆形头像制作

article 2024/10/27 7:00:55

代码比较简单，就不细讲了，大家直接看下面源码吧！如果对你有所帮助，可以帮角角点个关注嘛？

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？？？》

查看全文

http://www.kler.cn/news/366934.html