c++ - Qt Qml中的圆形图像

Question

我想在 Qt Qml 中实现圆形图像。我在以下代码中使用图像元素。

Rectangle {
                id: mask
                anchors.centerIn: parent
                width: 200
                height: 200
                radius: 100
                clip:true
            }

            Image {
                id: image
                anchors.fill: mask
                source: "test.jpg"
            }

但它不起作用。如果您对此有任何想法，请帮助我。谢谢。

Answer 1

剪裁总是应用于项目的矩形边界框。因此，您不能使用带裁剪的矩形来生成圆形图像。

但是您可以使用 OpacityMask去实现你想要的。在链接的文档中可以找到一个很好的例子。

或者你可以使用这个:

import QtQuick 2.7
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    id: root
    width: 1024
    height: 800
    visible: true

    Image {
        id: img
        source: 'ImageSource...'
        width: 500
        height: 500
        fillMode: Image.PreserveAspectCrop
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: mask
        }
    }

    Rectangle {
        id: mask
        width: 500
        height: 500
        radius: 250
        visible: false
    }
}