qml Image显示圆角图像

最新推荐文章于 2023-12-04 18:15:52 发布

班公湖里洗过脚

最新推荐文章于 2023-12-04 18:15:52 发布

阅读量1.5k

点赞数 3

分类专栏： qml 文章标签： qml Image

本文链接：https://blog.csdn.net/chenyijun/article/details/119772045

版权

qml 专栏收录该内容

40 篇文章 12 订阅

订阅专栏

qml的Image用来显示图像，但是显示的角度都是直像，Image不像Rectangle有圆角radius这个属性，如果想显示圆角的图像该如何设置呢，这个时假我们可以用OpacityMask来配合使用，下面请看具体示例：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.13

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Image {
        id: normalImage
        width: 150
        height: 150
        anchors.left: parent.left
        anchors.leftMargin: 100
        anchors.top: parent.top
        anchors.topMargin: 100
        source: "qrc:/header.jpg"
    }

    MouseArea {
        id: imageRect
        width: 150
        height: 150
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.right: parent.right
        anchors.rightMargin: 100
        //头像
        Image {
            id: nameIamge
            anchors.fill: parent
            source: "qrc:/header.jpg"
            visible: false
            onStatusChanged: {
                if(nameIamge.status === Image.Error){
                    console.log("load error==============")
                }
            }
        }
        Rectangle{
            id: mask
            anchors.fill: parent
            radius: 10
            visible: false
        }
        OpacityMask {
            anchors.fill: parent
            source: nameIamge
            maskSource: mask
        }
    }

}

运行结果：