Qt Qml中的圆形图像

Question

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

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