9

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.

Uma Sankar Buddi
  • 277
  • 2
  • 14
  • 2
    Possible duplicate of [Image rounded corners in QML](http://stackoverflow.com/questions/6090740/image-rounded-corners-in-qml) – BaCaRoZzo Feb 24 '17 at 08:27

1 Answers1

12

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
    }
}
derM - not here for BOT dreams
  • 13,081
  • 4
  • 49
  • 89
  • What's the difference in putting the `OpacityMask` in `layer.effect` compared to just as a regular child of the `Window` here ? – GrecKo Feb 24 '17 at 08:55
  • From what I can see, it is not much more than a alternative way, for those who prefere it. I think the most relevant function for this is [here](https://code.woboq.org/qt5/qtdeclarative/src/quick/items/qquickitem.cpp.html#7921). So basically it does, what you might do your self: Turning the source invisible, setting the sources, and all stuff. – derM - not here for BOT dreams Feb 24 '17 at 09:39