Graphiques

Parcourir l’exemple

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) fournit un canevas graphique multiplateforme sur lequel les graphiques 2D peuvent être dessinés à l’aide de types à partir de l’espace Microsoft.Maui.Graphics de noms. Ce canevas prend en charge le dessin et la peinture de formes et d’images, les opérations de composition et les transformations d’objets graphiques.

Il existe de nombreuses similitudes entre les fonctionnalités fournies par Microsoft.Maui.Graphics, et les fonctionnalités fournies par les formes et pinceaux .NET MAUI. Toutefois, chacun s’adresse à différents scénarios :

• Microsoft.Maui.Graphics les fonctionnalités doivent être consommées sur un canevas de dessin, permettent de dessiner des graphiques performants et fournit une approche pratique pour écrire des contrôles graphiques. Par exemple, un contrôle qui réplique le profil de contribution GitHub peut être plus facilement implémenté à l’aide Microsoft.Maui.Graphics de formes .NET MAUI.
• Les formes .NET MAUI peuvent être consommées directement sur une page, et les pinceaux peuvent être consommés par tous les contrôles. Cette fonctionnalité est fournie pour vous aider à produire une interface utilisateur attrayante.

Pour plus d’informations sur les formes .NET MAUI, consultez Formes.

Dessiner des graphiques

Dans .NET MAUI, la GraphicsView consommation de Microsoft.Maui.Graphics fonctionnalités est possible. GraphicsView définit la Drawable propriété, de type IDrawable, qui spécifie le contenu qui sera dessiné par le contrôle. Pour spécifier le contenu qui sera dessiné, vous devez créer un objet qui dérive de IDrawable, et implémenter sa Draw méthode :

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

La Draw méthode comporte ICanvas et RectF arguments. L’argument ICanvas est le canevas de dessin sur lequel vous dessinez des objets graphiques. L’argument RectF est un struct qui contient des données sur la taille et l’emplacement du canevas de dessin.

En XAML, l’objet IDrawable peut être déclaré en tant que ressource, puis consommé par une GraphicsView en spécifiant sa clé comme valeur de la Drawable propriété :

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

Pour plus d’informations sur le GraphicsViewgraphique, consultez GraphicsView.

Dessin de canevas

Le GraphicsView contrôle permet d’accéder à un ICanvas objet, via son IDrawable objet, sur lequel les propriétés peuvent être définies et les méthodes appelées pour dessiner des objets graphiques. Pour plus d’informations sur le dessin sur un ICanvasobjet graphique, consultez Dessin d’objets graphiques.

ICanvas définit les propriétés suivantes qui affectent l’apparence des objets dessinés sur le canevas :

• Alpha, de type float, indique l’opacité d’un objet.
• Antialias, de type bool, spécifie si l’anticrénelage est activé.
• BlendMode, de type BlendMode, définit le mode de fusion, qui détermine ce qui se passe lorsqu’un objet est rendu au-dessus d’un objet existant.
• DisplayScale, de type float, représente le facteur de mise à l’échelle pour mettre à l’échelle l’interface utilisateur sur un canevas.
• FillColor, de type Color, indique la couleur utilisée pour peindre l’intérieur d’un objet.
• Font, de type IFont, définit la police lors du dessin de texte.
• FontColor, de type Color, spécifie la couleur de police lors du dessin de texte.
• FontSize, de type float, définit la taille de la police lors du dessin de texte.
• MiterLimit, de type float, spécifie la limite de la longueur de mitreur des jointures de ligne dans un objet.
• StrokeColor, de type Color, indique la couleur utilisée pour peindre le contour d’un objet.
• StrokeDashOffset, de type float, spécifie la distance dans le modèle de tirets où commence un tiret.
• StrokeDashPattern, de type float[], spécifie le modèle de tirets et d’écarts utilisés pour décrire un objet.
• StrokeLineCap, de type LineCap, décrit la forme au début et à la fin d’une ligne.
• StrokeLineJoin, de type LineJoin, spécifie le type de jointure utilisé aux sommets d’une forme.
• StrokeSize, de type float, indique la largeur du contour d’un objet.

Par défaut, un ICanvas ensemble est défini StrokeSize sur 1, StrokeColor sur noir, StrokeLineJoin sur LineJoin.Miteret StrokeLineCap sur LineJoin.Cap.

État du canevas de dessin

Le canevas de dessin sur chaque plateforme a la possibilité de maintenir son état. Cela vous permet de conserver l’état graphique actuel et de le restaurer si nécessaire.

Toutefois, tous les éléments du canevas ne sont pas tous des éléments de l’état graphique. L’état graphique n’inclut pas les objets de dessin, tels que les chemins d’accès et les objets de peinture, tels que les dégradés. Les éléments classiques de l’état graphique de chaque plateforme incluent des données de trait et de remplissage, ainsi que des données de police.

L’état graphique de chacun ICanvas peut être manipulé avec les méthodes suivantes :

• SaveState, qui enregistre l’état graphique actuel.
• RestoreState, qui définit l’état graphique sur l’état enregistré le plus récemment.
• ResetState, qui réinitialise l’état graphique à ses valeurs par défaut.

Remarque

L’état persistant par ces méthodes dépend de la plateforme.