Dot.Blog

C#, XAML, WinUI, WPF, Android, MAUI, IoT, IA, ChatGPT, Prompt Engineering

Les masques de clipping sous MAUI

Avec un support assez large de primitives graphiques MAUI ouvre la voie à des effets visuels qu’il était assez difficile de réaliser avant. Comme les masques de clipping.

Les masques de clipping

Imaginez si vous pouviez gérer la zone de recadrage d'un dessin ou d'une vue avec une plus grande précision… par exemple, masquer une image dans une forme circulaire. Ce serait vraiment bien, et sans plugin tiers ça serait carrément merveilleux ! Eh bien, avec .NET MAUI, on peut le faire !

Et comment ? En utilisant un masque de clipping.

La base du clipping

Tous les éléments visuels possèdent une propriété Clip qu’il suffit d’initialiser en utilisant un objet géométrique pour que le contenu de l’élément visuel se trouve limité visuellement selon le contour de l’objet géométrique.

La structure générale du clipping est la suivante :

<ControlType>
  <ControlType.Clip>
    <add_shape_here RadiusX="value"
                    RadiusY="value"
                    Center="value"
  <ControlType.Clip/>
<ControlType/>

Un exemple

Les éléments qu’on utilise pour clipper sont des « geometry », utilisons une ellipse pour clipper le contenu d’une image :

<Image Source="BossHead.png">
    <Image.Clip>
        <EllipseGeometry RadiusX="80"
                         RadiusY="80"
                         Center="80,80" />
    </Image.Clip>
</Image>

Et voici le début d’un trombinoscope avec des photos rondes !

Les géométries

MAUI propose plusieurs classes pour créer des figures géométriques 2D. On y retrouve EllipseGeometry utilisée dans l’exemple ci-dessus, mais aussi LineGeometry, RectangleGeometry ou GeometryGroup qui est un conteneur réunissant plusieurs géométries et le PathGeometry qui reprend le principe du Path XAML et la structure de données quasi identique à celle de SVG (il est possible par copier/coller de réutiliser des dessins SVG de cette façon).

Conclusion

Certes on est loin de Inkscape ou même du designer visuel de WPF, mais on dispose désormais de nombreuses primitives de dessin sous MAUI, le Clipping ou les Geometry en font partie. N’oubliez pas que toutes ces possibilités s’utilisent dans votre code MAUI, c’est-à-dire un code cross-plateforme parfaitement adapté à toutes les cibles en natif !

C’est un progrès énorme, une avancée sur laquelle d’autres encore plus puissantes pourront être bâties.

Stay Tuned !


Faites des heureux, partagez l'article !
blog comments powered by Disqus