How to make round imageas

Kiovtorov

I can't seem to find how to make a round Image.
I tried using a mask which didn't work

   Rectangle
                                    {
                                        id: mask
                                        anchors.left: parent.left
                                        anchors.leftMargin: 15
                                        width: 50
                                        height: 50
                                        radius:25
                                        clip: true

                                    }

                                    Image {
                                        id: storeIcon
                                       anchors.fill: mask
                                        source: model.source

                                    }

Some said to use ShaderEffectSource in 2011 but that also didn't work out since qt designer studio couldn't find the import. Am I missing a method?

Kiovtorov

@Markkyboy
The whole problem with OpacityMask was QtGraphicalEffects since it is not included in Qt6 but I in a forum I found import Qt5Compat.GraphicalEffects and it now works like following:

Rectangle {
                                            id: mask
                                            anchors.left: parent.left
                                            anchors.leftMargin: 15
                                            width: 50
                                            height: 50
                                            radius: 25
                                            clip: true
                                        }

                                        Image {
                                            id: storeIcon
                                            anchors.fill: mask
                                            source: "qrc:/image.png"
                                            fillMode: Image.PreserveAspectCrop
                                                    layer.enabled: true
                                                    layer.effect: OpacityMask {
                                                        maskSource: mask
                                                    }
                                        }

J.Hilk

@Kiovtorov move the Image inside the scope of mask. make it a child, not a sibling.

Kiovtorov

If you meant the structure to be like the following

Rectangle
                                    {
                                        id: mask
                                        anchors.left: parent.left
                                        anchors.leftMargin: 15
                                        width: 50
                                        height: 50
                                        radius:25
                                        clip: true
                                        Image {
                                            id: storeIcon
                                           anchors.fill: mask
                                            source: model.source

                                        }
                                    }

it didn't work

Markkyboy

@Kiovtorov - take a look at an example directly from Qt; https://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html - I think you'll better understand the layout of the code and see what you're missing code wise.

Kiovtorov

@Markkyboy
The whole problem with OpacityMask was QtGraphicalEffects since it is not included in Qt6 but I in a forum I found import Qt5Compat.GraphicalEffects and it now works like following:

Rectangle {
                                            id: mask
                                            anchors.left: parent.left
                                            anchors.leftMargin: 15
                                            width: 50
                                            height: 50
                                            radius: 25
                                            clip: true
                                        }

                                        Image {
                                            id: storeIcon
                                            anchors.fill: mask
                                            source: "qrc:/image.png"
                                            fillMode: Image.PreserveAspectCrop
                                                    layer.enabled: true
                                                    layer.effect: OpacityMask {
                                                        maskSource: mask
                                                    }
                                        }