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:
Merci de votre aide.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 OpacityMask{ anchors.fill: rectangleNoir source: image maskSource: rectangleNoir }
cordialement
Partager