Peindre des objets graphiques

Parcourir l’exemple

Les graphiques .NET Multiplateforme App UI (.NET MAUI) incluent la possibilité de peindre des objets graphiques avec des couleurs unie, des dégradés, des images répétées et des motifs.

La Paint classe est une classe abstraite qui peint un objet avec sa sortie. Classes dérivées de Paint décrire différentes façons de peindre un objet. La liste suivante décrit les différents types de peinture disponibles dans les graphiques .NET MAUI :

• SolidPaint, qui peint un objet avec une couleur unie. Pour plus d’informations, consultez Peindre une couleur unie.
• ImagePaint, qui peint un objet avec une image. Pour plus d’informations, consultez Peindre une image.
• PatternPaint, qui peint un objet avec un motif. Pour plus d’informations, consultez Paint a pattern.
• GradientPaint, qui peint un objet avec un dégradé. Pour plus d’informations, consultez Paint a gradient.

Les instances de ces types peuvent être peintes sur un ICanvasobjet graphique, généralement à l’aide de la SetFillPaint méthode pour définir la peinture comme remplissage d’un objet graphique.

La Paint classe définit BackgroundColorégalement , et ForegroundColor les propriétés, de type Color, qui peuvent être utilisées pour définir éventuellement des couleurs d’arrière-plan et de premier plan pour un Paint objet.

Peindre une couleur unie

La SolidPaint classe, dérivée de la Paint classe, est utilisée pour peindre un objet graphique avec une couleur unie.

La SolidPaint classe définit une Color propriété de type Color, qui représente la couleur de la peinture. La classe a également une IsTransparent propriété qui retourne un bool qui indique si la couleur a une valeur alpha inférieure à 1.

Créer un objet SolidPaint

La couleur d’un SolidPaint objet est généralement spécifiée par le biais de son constructeur, à l’aide d’un Color argument :

SolidPaint solidPaint = new SolidPaint(Colors.Silver);

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

L’objet SolidPaint est spécifié comme premier argument de la SetFillPaint méthode. Par conséquent, un rectangle arrondi rempli est peint avec un objet argent SolidPaint :

Vous pouvez également spécifier la couleur avec la Color propriété :

SolidPaint solidPaint = new SolidPaint
{
    Color = Colors.Silver
};

RectF solidRectangle = new RectF(100, 100, 200, 100);
canvas.SetFillPaint(solidPaint, solidRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(solidRectangle, 12);

Peindre une image

La ImagePaint classe, dérivée de la Paint classe, est utilisée pour peindre un objet graphique avec une image.

La ImagePaint classe définit une Image propriété de type IImage, qui représente l’image à peindre. La classe a également une IsTransparent propriété qui retourne false.

Créer un objet ImagePaint

Pour peindre un objet avec une image, chargez l’image et affectez-la à la Image propriété de l’objet ImagePaint .

Remarque

Le chargement d’une image incorporée dans un assembly nécessite que l’image ait son action de génération définie sur La ressource incorporée.

L’exemple suivant montre comment charger une image et remplir un rectangle avec celui-ci :

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    ImagePaint imagePaint = new ImagePaint
    {
        Image = image.Downsize(100)
    };
    canvas.SetFillPaint(imagePaint, RectF.Zero);
    canvas.FillRectangle(0, 0, 240, 300);
}

Dans cet exemple, l’image est récupérée à partir de l’assembly et chargée en tant que flux. L’image est redimensionnée à l’aide de la Downsize méthode, avec l’argument spécifiant que sa plus grande dimension doit être définie sur 100 pixels. Pour plus d’informations sur le redimensionnement d’une image, consultez Downsize an image.

La Image propriété de l’objet ImagePaint est définie sur la version downsized de l’image et l’objet ImagePaint est défini comme peinture pour remplir un objet. Un rectangle est ensuite dessiné avec la peinture :

Remarque

Un ImagePaint objet peut également être créé à partir d’un IImage objet par la méthode d’extension AsPaint .

Vous pouvez également utiliser la SetFillImage méthode d’extension pour simplifier le code :

if (image != null)
{
    canvas.SetFillImage(image.Downsize(100));
    canvas.FillRectangle(0, 0, 240, 300);
}

Peindre un motif

La PatternPaint classe, dérivée de la Paint classe, est utilisée pour peindre un objet graphique avec un motif.

La PatternPaint classe définit une Pattern propriété de type IPattern, qui représente le motif à peindre. La classe a également une IsTransparent propriété qui retourne un bool qui indique si l’arrière-plan ou la couleur de premier plan de la peinture a une valeur alpha inférieure à 1.

Créer un objet PatternPaint

Pour peindre une zone avec un motif, créez le modèle et affectez-le à la Pattern propriété d’un PatternPaint objet.

L’exemple suivant montre comment créer un modèle et remplir un objet avec celui-ci :

IPattern pattern;

// Create a 10x10 template for the pattern
using (PictureCanvas picture = new PictureCanvas(0, 0, 10, 10))
{
    picture.StrokeColor = Colors.Silver;
    picture.DrawLine(0, 0, 10, 10);
    picture.DrawLine(0, 10, 10, 0);
    pattern = new PicturePattern(picture.Picture, 10, 10);
}

// Fill the rectangle with the 10x10 pattern
PatternPaint patternPaint = new PatternPaint
{
    Pattern = pattern
};
canvas.SetFillPaint(patternPaint, RectF.Zero);
canvas.FillRectangle(10, 10, 250, 250);

Dans cet exemple, le modèle est une zone de 10 x 10 qui contient une ligne diagonale de (0,0) à (10,10) et une ligne diagonale de (0,10) à (10,0). La Pattern propriété de l’objet PatternPaint est définie sur le modèle et l’objet PatternPaint est défini comme peinture pour remplir un objet. Un rectangle est ensuite dessiné avec la peinture :

Remarque

Un PatternPaint objet peut également être créé à partir d’un PicturePattern objet par la méthode d’extension AsPaint .

Peindre un dégradé

La GradientPaint classe, dérivée de la Paint classe, est une classe de base abstraite qui décrit un dégradé, composé d’étapes de dégradé. Un GradientPaint objet graphique peint un objet graphique avec plusieurs couleurs qui se mélangent les uns aux autres le long d’un axe. Les classes qui dérivent de GradientPaint différentes façons d’interpréter les arrêts de dégradés et les graphiques .NET MAUI fournissent les peintures dégradées suivantes :

• LinearGradientPaint, qui peint un objet avec un dégradé linéaire. Pour plus d’informations, consultez Peindre un dégradé linéaire.
• RadialGradientPaint, qui peint un objet avec un dégradé radial. Pour plus d’informations, consultez Peindre un dégradé radial.

La GradientPaint classe définit la GradientStops propriété, de type PaintGradientStop, qui représente les arrêts de dégradé du pinceau, chacun d’entre eux spécifiant une couleur et un décalage le long de l’axe de dégradé.

Points de dégradé

Les points de dégradé sont les blocs de construction d’un dégradé et spécifient les couleurs dans le dégradé et leur emplacement le long de l’axe du dégradé. Les arrêts de dégradé sont spécifiés à l’aide d’objets PaintGradientStop .

La PaintGradientStop classe définit les propriétés suivantes :

• Color, de type Color, qui représente la couleur de l’arrêt de dégradé.
• Offset, de type float, qui représente l’emplacement de l’arrêt de dégradé dans le vecteur de dégradé. Les valeurs valides se trouvent dans la plage 0.0-1.0. Plus cette valeur est proche de 0, plus la couleur est proche du début du dégradé. De même, plus cette valeur est proche de 1, plus la couleur est proche de la fin du dégradé.

Important

Le système de coordonnées utilisé par les dégradés est relatif à un cadre englobant pour l’objet graphique. 0 indique 0 pour cent de la zone englobante, et 1 indique 100 pour cent de la zone englobante. Par conséquent, (0,5,0,5) décrit un point au milieu du cadre englobant, et (1,1) décrit un point situé en bas à droite du cadre englobant.

Les arrêts de dégradé peuvent être ajoutés à un GradientPaint objet avec la AddOffset méthode.

L’exemple suivant crée une diagonale LinearGradientPaint avec quatre couleurs :

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    StartPoint = new Point(0, 0),
    EndPoint = new Point(1, 1)
};

linearGradientPaint.AddOffset(0.25f, Colors.Red);
linearGradientPaint.AddOffset(0.75f, Colors.Blue);

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);                                                     

La couleur de chaque point entre les points de dégradé est interpolée comme combinaison de la couleur spécifiée par les deux arrêts de dégradé englobants. Le diagramme suivant montre les arrêts de dégradé de l’exemple précédent :

Dans ce diagramme, les cercles marquent la position des arrêts de dégradé et la ligne en pointillés affiche l’axe du dégradé. Le premier point de dégradé spécifie la couleur jaune à un décalage de 0,0. Le deuxième point de dégradé spécifie la couleur rouge à un décalage de 0,25. Les points entre ces deux dégradés s’arrêtent progressivement de jaune à rouge lorsque vous passez de gauche à droite le long de l’axe du dégradé. Le troisième point de dégradé spécifie la couleur bleue à un décalage de 0,75. Les points situés entre le deuxième et le troisième point de dégradé passent progressivement du rouge au bleu. Le quatrième point de dégradé spécifie la couleur vert vert à l’offset de 1,0. Les points situés entre le troisième et le quatrième point de dégradé passent progressivement du bleu au vert citron.

Peindre un dégradé linéaire

La LinearGradientPaint classe, dérivée de la GradientPaint classe, peint un objet graphique avec un dégradé linéaire. Un dégradé linéaire fusionne deux couleurs ou plus le long d’une ligne appelée axe dégradé. PaintGradientStop les objets sont utilisés pour spécifier les couleurs dans le dégradé et leurs positions. Pour plus d’informations sur les PaintGradientStop objets, consultez Paint a gradient.

La LinearGradientPaint classe définit les propriétés suivantes :

• StartPoint, de type Point, qui représente les coordonnées bidimensionnelles de départ du dégradé linéaire. Le constructeur de classe initialise cette propriété sur (0,0).
• EndPoint, de type Point, qui représente les coordonnées bidimensionnelles de fin du dégradé linéaire. Le constructeur de classe initialise cette propriété sur (1,1).

Créer un objet LinearGradientPaint

Les points de dégradé linéaires sont positionnés le long de l’axe de dégradé. L’orientation et la taille de l’axe de dégradé peuvent être modifiées à l’aide des propriétés et EndPoint des StartPoint propriétés. En manipulant ces propriétés, vous pouvez créer des dégradés horizontaux, verticaux et diagonals, inverser la direction du dégradé, condenser la propagation du dégradé, etc.

Les StartPoint propriétés et EndPoint les propriétés sont relatives à l’objet graphique peint. (0,0) représente le coin supérieur gauche de l’objet peint et (1,1) représente le coin inférieur droit de l’objet peint. Le diagramme suivant montre l’axe dégradé d’un pinceau de dégradé linéaire diagonal :

Dans ce diagramme, la ligne en pointillés montre l’axe du dégradé, qui met en évidence le chemin d’interpolation du dégradé du point de départ au point de fin.

Créer un dégradé linéaire horizontal

Pour créer un dégradé linéaire horizontal, créez un LinearGradientPaint objet et définissez ses StartColor propriétés.EndColor Ensuite, définissez-le EndPoint sur (1,0).

L’exemple suivant montre comment créer un horizontal LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(1, 0)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé linéaire qui interpole horizontalement du jaune au vert :

Créer un dégradé linéaire vertical

Pour créer un dégradé linéaire vertical, créez un LinearGradientPaint objet et définissez ses propriétés et EndColor ses StartColor propriétés. Ensuite, définissez-le EndPoint sur (0,1).

L’exemple suivant montre comment créer un vertical LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    EndPoint = new Point(0, 1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé linéaire qui interpole verticalement du jaune au vert :

Créer un dégradé linéaire diagonal

Pour créer un dégradé linéaire diagonal, créez un LinearGradientPaint objet et définissez ses StartColor propriétés.EndColor

L’exemple suivant montre comment créer une diagonale LinearGradientPaint:

LinearGradientPaint linearGradientPaint = new LinearGradientPaint
{
    StartColor = Colors.Yellow,
    EndColor = Colors.Green,
    // StartPoint is already (0,0)
    // EndPoint is already (1,1)
};

RectF linearRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(linearGradientPaint, linearRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(linearRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé linéaire qui interpole diagonalement de jaune à vert :

Peindre un dégradé radial

La RadialGradientPaint classe, dérivée de la GradientPaint classe, peint un objet graphique avec un dégradé radial. Un dégradé radial fusionne deux couleurs ou plus sur un cercle. PaintGradientStop les objets sont utilisés pour spécifier les couleurs dans le dégradé et leurs positions. Pour plus d’informations sur les PaintGradientStop objets, consultez Paint a gradient.

La RadialGradientPaint classe définit les propriétés suivantes :

• Center, de type Point, qui représente le point central du cercle pour le dégradé radial. Le constructeur de classe initialise cette propriété sur (0,5,0,5).
• Radius, de type double, qui représente le rayon du cercle pour le dégradé radial. Le constructeur de classe initialise cette propriété à 0,5.

Créer un objet RadialGradientPaint

Les points de dégradé radial sont positionnés le long d’un axe dégradé défini par un cercle. L’axe dégradé rayonne du centre du cercle à sa circonférence. La position et la taille du cercle peuvent être modifiées à l’aide des propriétés et Radius des Center propriétés. Le cercle définit le point de terminaison du dégradé. Par conséquent, un point de dégradé à 1,0 définit la couleur à la circonférence du cercle. Un point de dégradé à 0,0 définit la couleur au centre du cercle.

Pour créer un dégradé radial, créez un RadialGradientPaint objet et définissez ses StartColor propriétés.EndColor Ensuite, définissez ses propriétés et Radius ses Center propriétés.

L’exemple suivant montre comment créer un centre RadialGradientPaint:

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue
    // Center is already (0.5,0.5)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé radial qui interpole du rouge au bleu foncé. Le centre du dégradé radial est positionné au centre du rectangle :

L’exemple suivant déplace le centre du dégradé radial vers le coin supérieur gauche du rectangle :

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(0.0, 0.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé radial qui interpole du rouge au bleu foncé. Le centre du dégradé radial est positionné en haut à gauche du rectangle :

L’exemple suivant déplace le centre du dégradé radial vers le coin inférieur droit du rectangle :

RadialGradientPaint radialGradientPaint = new RadialGradientPaint
{
    StartColor = Colors.Red,
    EndColor = Colors.DarkBlue,
    Center = new Point(1.0, 1.0)
    // Radius is already 0.5
};

RectF radialRectangle = new RectF(10, 10, 200, 100);
canvas.SetFillPaint(radialGradientPaint, radialRectangle);
canvas.SetShadow(new SizeF(10, 10), 10, Colors.Grey);
canvas.FillRoundedRectangle(radialRectangle, 12);

Dans cet exemple, le rectangle arrondi est peint avec un dégradé radial qui interpole du rouge au bleu foncé. Le centre du dégradé radial est positionné en bas à droite du rectangle :