Gestion des images avec les graphiques .NET MAUI

Vous êtes-vous déjà interrogé sur les nouvelles fonctionnalités de .NET MAUI ? Aujourd’hui, je vais vous parler de .NET MAUI Graphics axé sur la gestion des images.

Tout d’abord, il est important que nous sachions clairement de quoi nous parlons lorsque nous nous référons à Graphiques .NET MAUI.

.NET MAUI Graphics fournit un canevas graphique multiplateforme sur lequel vous pouvez dessiner, peindre des formes et des images, composer des opérations et transformer des objets graphiques 2D contenus dans les espaces de noms Microsoft.Maui.Graphics.

Il convient de noter que cela présente une similitude avec les formes .NET MAUI, clarifions donc les différences entre elles :

• Avec Formes, vous pouvez utiliser tous les pinceaux dans tous les contrôles disponibles. De manière générale également les formes peuvent être consommées dans une Page.
• Microsoft.Maui.GraphicsMicrosoft.Maui.Graphics doit être consommé dans une toile de dessin. Ici, vous pouvez également dessiner des graphiques hautes performances et cela nous fournit une approche pour écrire des contrôles basés sur des graphiques.

Pour plonger dans .NET MAUI Graphics en général, nous vous invitons à entrer Cet article. En attendant, dans cet article, nous nous concentrerons sur l’apprentissage de la gestion des images.

Pourquoi aurez-vous besoin de graphiques .NET MAUI ?

L’un des avantages de .NET MAUI Graphics est qu’il possède des fonctions qui vous permettent de manipuler des images en nous permettant de charger, enregistrer, réduire ou redimensionner des images. Ceux-ci sont représentés par le IImage type, qui définit le Largeur et Hauteur properties, toutes deux de type Float et définissant respectivement la largeur et la hauteur d’une image.

.NET MAUI contient deux IImage interfaces :

• Microsoft.Maui.Graphics.IImageMicrosoft.Maui.Graphics.IImage est responsable de l’affichage, de la manipulation et de la persistance des images lorsque des graphiques sont affichés dans un GraphicsView. Cela se produit via un canevas qui est exposé en tant qu’objet ICanvas. Vous pouvez en savoir plus sur GraphicsView dans l’article Vue graphique .NET MAUI.
• Microsoft.Maui.IImageMicrosoft.Maui.IImage abstrait le champ Image.

De plus, lors du chargement ou de l’enregistrement d’images, vous pouvez ajouter un argument facultatif nommé format d’imagequi est une énumération qui définit le format de l’image tel que PNG, JPEG, GIF, TIFF et BMP.

⚠ Mais gardez à l’esprit que vous ne pourrez les voir que s’ils sont compatibles avec la plateforme sous-jacente— sinon, même si vous les ajoutez ici, vous ne pourrez pas les voir comme disponibles.

Charger une image

Pour charger une image, vous devez vous assurer d’appliquer les étapes suivantes :

1. Ajoutez votre image

Ajoutez votre image dans le dossier Ressources ➡ Images. Ensuite, faites un clic droit sur l’image ➡ Build Action ➡ Ressource intégrée. (🚫 Pas MauiImage.)

2. Créez la classe de dessin

Le chargement des images est rendu possible par la classe GraphicsService. Cela peut être chargé à partir d’un flux avec le LoadFromStream méthode ou à partir d’un tableau d’octets avec la LoadImageFromBytes méthode.

Regardons un exemple :

➖ Tout d’abord, créons une classe pour héberger ICanvas. Nous allons le nommer CanvaDrawÉchantillon. Il utilise le IDrawable interface qui implémente Dessiner méthode, comme indiqué dans ce qui suit :

public class CanvaDrawSample : IDrawable
{
	public void Draw(ICanvas canvas, RectF dirtyRect)
	{
		Microsoft.Maui.Graphics.IImage image;
		Assembly assembly = GetType().GetTypeInfo().Assembly;
		using (Stream stream = assembly.GetManifestResourceStream("MauiGraphicsSample.Resources.Images.windows.png"))
		{
		image = PlatformImage.FromStream(stream);
		}

		if (image != null)
		canvas.DrawImage(image, 10, 15, 90, 90);
	}
}

Quelques éléments à retenir :

Lorsque vous utilisez le DessinerImage gardez à l’esprit qu’elle reçoit les paramètres suivants :

Aussi, lorsque vous utilisez le GetManifestResourceStreamGetManifestResourceStream méthode, la chaîne qu’elle reçoit est la emplacement du fichier. C’est une composition des éléments suivants :

3. Créer le XAML

Enfin, créons le MainPage.xaml où nous afficherons l’image. Pour ce faire, vous avez juste besoin des éléments suivants :

➖ Ajoutez une référence à votre classe drawable. N’oubliez pas d’ajouter un x : Clé– c’est l’alias par lequel vous pouvez vous référer à cette classe plus tard.

⚠ Pour cet exemple, nous utiliserons ContentPage.Resources dans notre Page.

<ContentPage.Resources>
  <local:CanvaDrawSample x:Key="MyDrawable" />
</ContentPage.Resources>

➖ Ensuite, ajoutez le contrôle GraphicsView et dans la propriété drawable, vous pouvez utiliser StaticResource suivi du nom que vous avez ajouté précédemment dans le x : clé pour indiquer la classe drawable.

<VerticalStackLayout>
	<GraphicsView
	HorizontalOptions="Fill"
	Drawable="{StaticResource MyDrawable}"
	WidthRequest="100"
	HeightRequest="100" />
</VerticalStackLayout>

Et enfin, notre résultat !

Limites de la plate-forme

Windows ne prend pas en charge la PlatformImage.

Redimensionner une image

Les images peuvent également être redimensionnées. Pour cela, nous utilisons le IImage.Resize méthode, qui reçoit les paramètres suivants :

• Largeur et Hauteur de type float, respectivement pour la largeur et la hauteur.
• ResizeMode (optionnel): Il est chargé de contrôler la façon dont l’image sera redimensionnée pour s’adapter à ses dimensions cibles. C’est un énumérateur qui a les options suivantes :
  • Adapter: Ajoute l’image dans un format boîte aux lettres pour s’adapter à votre taille cible.
  • Saigner: Recadre l’image pour l’adapter à sa taille cible, sans perdre son rapport hauteur/largeur.
  • Extensible: Il est chargé d’étirer l’image afin qu’elle remplisse l’espace disponible. Cela peut affecter le rapport d’aspect de l’image.
• Jeter l’original (facultatif) : Valeur booléenne, qui est False par défaut. Contrôle si l’image source doit être supprimée après avoir effectué l’opération de réduction.

Voyons un exemple de redimensionnement

Dans cet exemple, l’image est redimensionnée, les informations pour la nouvelle taille sont attribuées et il est indiqué qu’elle doit être étirée pour compenser l’espace blanc. Enfin, l’image d’origine est supprimée.

public void Draw(ICanvas canvas, RectF dirtyRect)
{
	Microsoft.Maui.Graphics.IImage image;
	Assembly assembly = GetType().GetTypeInfo().Assembly;
		using (Stream stream = assembly.GetManifestResourceStream("MauiGraphicsSample.Resources.Images.windows.png"))
		{
		image = PlatformImage.FromStream(stream);
		}
		
		if (image != null)
		{
		Microsoft.Maui.Graphics.IImage newImage = image.Resize(100, 60, ResizeMode.Stretch, true);
		canvas.DrawImage(newImage, 10, 10, newImage.Width, newImage.Height);
		}
}

Réduire une image

Pour réduire une image, vous pouvez utiliser le IImage.Downsize méthode. Qui reçoit les paramètres suivants :

• MaxWidthOrHeight (obligatoire) : C’est une valeur flottante qui représente la largeur ou la hauteur maximale de l’image et réduit la taille de l’image en conservant son rapport d’aspect.
• DisposeOriginal (facultatif): Valeur booléenne, qui est False par défaut. Contrôle si l’image source doit être supprimée après avoir effectué l’opération de réduction.

Voyons un exemple de réduction des effectifs

public void Draw(ICanvas canvas, RectF dirtyRect)
{
	Microsoft.Maui.Graphics.IImage image;
	Assembly assembly = GetType().GetTypeInfo().Assembly;
		using (Stream stream = assembly.GetManifestResourceStream("MauiGraphicsSample.Resources.Images.windows.pngg"))
		{
		image = PlatformImage.FromStream(stream);
		}

		if (image != null)
		{
		Microsoft.Maui.Graphics.IImage newImage = image.Downsize(100, true);
		canvas.DrawImage(newImage, 10, 10, newImage.Width, newImage.Height);
		}
}

Enregistrer une image

Vous pouvez enregistrer les images souhaitées à l’aide de la IImage.Enregistrer et IImage.SaveAsyncIImage.SaveAsync méthodes, qui reçoivent toutes les deux les paramètres suivants :

• Flux (obligatoire) : C’est un type de données MemoryStream.
• Format (facultatif) : C’est un type ImageFormat et attend le type de format de l’image. Par défaut, il a .png comme valeur.
• Qualité (facultatif) : C’est la qualité et c’est du type flotteur. Sa valeur par défaut est 1.

Voyons un exemple d’économie

public void Draw(ICanvas canvas, RectF dirtyRect)
{
	Microsoft.Maui.Graphics.IImage image;

	Assembly assembly = GetType().GetTypeInfo().Assembly;
		using (Stream stream = assembly.GetManifestResourceStream("MauiGraphicsSample.Resources.Images.windows.png"))
		{
		image = PlatformImage.FromStream(stream);
		}
	
	if (image != null)
	{
		Microsoft.Maui.Graphics.IImage newImage = image.Downsize(150, true);
		using (MemoryStream memStream = new MemoryStream())
		{
		newImage.Save(memStream);
		}
	}
}

Emballer

Et.. Voila! 💥 Dans cet article, vous avez appris à enregistrer, charger, réduire et redimensionner une image.

J’espère qu’il vous a été très utile. À la prochaine! 🙋‍♀️

Référence: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/graphics/images