Image aux coins arrondis

Bonjour,

Je me casse les dents depuis hier sur la création de coins arrondis pour une image. J'ai un composant décomposé de la sorte:
-Rectangle blanc aux coins arrondis
-Rectangle noir aux coins arrondis plus petit et contenu dans le rectangle blanc (on a donc une bordure blanche sur le rectangle noir)
-Une image de la largeur de hauteur du rectangle noir

Le hic vient du fait que l'image dépasse du rectangle noir au niveau des coins (normal). Mais nulle part je n'ai trouvé comment masquer les coins! Et évidemment, les images ne possèdent pas de propriété radius du fait qu'elles ne sont pas toutes rectangulaires.

Solution 1: Superposer la bordure à l'image qui recouvrira alors les coins => ça paraît impossible avec que des rectangles, items,...

Solution 2: j'ai vu sur internet que quelqu'un avait utilisé des shaders effect mais j'ai rien compris...

Solution 3: Utiliser Opacity Mask pour masquer l'image qui dépasse du rectangle noir. Mais bizarrement ça n'a aucun effet. Le rectangle noir ne limite pas l'image. Voila mon code pour opacityMask:

Code:

---

1 2 3 4 5

OpacityMask{ anchors.fill: rectangleNoir source: image maskSource: rectangleNoir }

---

Merci de votre aide.

cordialement

Je viens juste de trouver en essayant: il ne faut pas oublier de régler la visibilité des éléments à false, sinon ils se superposent à l'opacityMask et on ne voit pas la différence.

Cordialement