QML Image圆角

要在QML的Image中设置圆角，可以使用OpacityMask来实现。首先，创建一个Rectangle作为遮罩，设置其radius属性为所需的圆角大小。然后，使用OpacityMask将遮罩应用到Image上。下面是一个示例代码：

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

在上述代码中，我们创建了一个Image来显示原始图像，并使用一个MouseArea来触发显示圆角的图像。在MouseArea中，我们使用了一个Rectangle作为遮罩，设置了其radius属性为10，以实现圆角效果。然后，使用OpacityMask将遮罩应用到Image上，从而达到显示圆角图像的效果。

希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [qml Image显示圆角图像](https://blog.csdn.net/chenyijun/article/details/119772045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [qml Image绘制圆角(图片绘制圆角)](https://blog.csdn.net/qq_43081702/article/details/125104269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [QML Image获取资源路径的细节](https://download.csdn.net/download/weixin_38670949/12783402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]