SkiaSharp Graphics dans Xamarin.Forms

Télécharger l’exemple Télécharger l’exemple

Utiliser SkiaSharp pour les graphiques 2D dans vos Xamarin.Forms applications

SkiaSharp est un système graphique 2D pour .NET et C# alimenté par le moteur graphique open source Skia qui est largement utilisé dans les produits Google. Vous pouvez utiliser SkiaSharp dans vos Xamarin.Forms applications pour dessiner des graphiques vectoriels 2D, des bitmaps et du texte.

Ce guide suppose que vous êtes familiarisé avec Xamarin.Forms la programmation.

Préliminaires SkiaSharp

SkiaSharp pour Xamarin.Forms est empaqueté en tant que package NuGet. Après avoir créé une Xamarin.Forms solution dans Visual Studio ou Visual Studio pour Mac, vous pouvez utiliser le gestionnaire de package NuGet pour rechercher le package SkiaSharp.Views.Forms et l’ajouter à votre solution. Si vous case activée la section Références de chaque projet après avoir ajouté SkiaSharp, vous pouvez voir que différentes bibliothèques SkiaSharp ont été ajoutées à chacun des projets de la solution.

Si votre Xamarin.Forms application cible iOS, modifiez son fichier Info.plist pour remplacer la cible de déploiement minimale par iOS 8.0.

Dans toute page C# qui utilise SkiaSharp, vous devez inclure une using directive pour l’espace SkiaSharp de noms, qui englobe toutes les classes, structures et énumérations SkiaSharp que vous utiliserez dans votre programmation graphique. Vous souhaiterez également une using directive pour l’espace SkiaSharp.Views.Forms de noms pour les classes spécifiques à Xamarin.Forms. Il s’agit d’un espace de noms beaucoup plus petit, avec la classe la plus importante étant SKCanvasView. Cette classe dérive de la Xamarin.FormsView classe et héberge votre sortie graphique SkiaSharp.

Important

L’espace SkiaSharp.Views.Forms de noms contient également une SKGLView classe qui dérive de View mais utilise OpenGL pour le rendu des graphiques. Par souci de simplicité, ce guide se limite à SKCanvasView, mais l’utilisation SKGLView à la place est assez similaire.

Principes de base de dessin SkiaSharp

Certaines des figures graphiques les plus simples que vous pouvez dessiner avec SkiaSharp sont des cercles, des ovales et des rectangles. En affichant ces figures, vous découvrirez les coordonnées, les tailles et les couleurs de SkiaSharp. L’affichage du texte et des bitmaps est plus complexe, mais ces articles présentent également ces techniques.

Lignes et chemins d’accès SkiaSharp

Un chemin graphique est une série de lignes droites et de courbes connectées. Les chemins peuvent être tracés, remplis ou les deux. Cet article englobe de nombreux aspects du dessin de trait, y compris les extrémités de trait et les jointures, ainsi que les lignes pointillées et pointillées, mais s’arrête à des géométries de courbes courtes.

Transformations SkiaSharp

Les transformations permettent aux objets graphiques d’être traduits, mis à l’échelle, pivotés ou asymétriques de manière uniforme. Cet article explique également comment utiliser une matrice de transformation standard 3 par 3 pour créer des transformations non affines et appliquer des transformations aux chemins d’accès.

Courbes et chemins d’accès SkiaSharp

L’exploration des chemins se poursuit avec l’ajout de courbes à des objets de chemin et l’exploitation d’autres fonctionnalités de chemin puissantes. Vous verrez comment spécifier un chemin d’accès entier dans une chaîne de texte concise, comment utiliser des effets de chemin et comment explorer les éléments internes du chemin.

Bitmaps SkiaSharp

Les bitmaps sont des tableaux rectangulaires de bits correspondant aux pixels d’un périphérique d’affichage. Cette série d’articles montre comment charger, enregistrer, afficher, créer, dessiner, animer et accéder aux bits des bitmaps SkiaSharp.

Effets SkiaSharp

Les effets sont des propriétés qui modifient l’affichage normal des graphiques, y compris les dégradés linéaires et circulaires, les mosaïques bitmap, les modes de fusion, le flou, etc.