Circular Image in Qt Qml

Question

I want to implement circular image in Qt Qml. I am using Image element with the following code.

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

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

but it's not working. Help me out if you have any idea for this. Thanks.

Answer 1

The clipping is always applied to the rectangular bounding box of the item. Therefore you can't use the rectangle with clipping to produce a round image.

You can however use the OpacityMask to achive what you try to. A good example can be found in the linked doucmentation.

Or you can use this:

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