Graphisme SkiaSharp dans Xamarin.FormsSkiaSharp Graphics in Xamarin.Forms

Télécharger l’exemple télécharger l’exempleDownload Sample Download the sample

Utiliser SkiaSharp pour les graphismes 2D dans vos applications Xamarin.FormsUse SkiaSharp for 2D graphics in your Xamarin.Forms applications

SkiaSharp est un système de graphismes 2D pour .NET et le moteur de graphiques Skia open source qui est largement utilisé dans les produits Google pour c#.SkiaSharp is a 2D graphics system for .NET and C# powered by the open-source Skia graphics engine that is used extensively in Google products. Vous pouvez utiliser SkiaSharp dans vos applications Xamarin.Forms pour dessiner le texte, les bitmaps et les graphiques à vecteurs 2D.You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text. Consultez le dessin 2D guide pour plus d’informations générales sur la bibliothèque SkiaSharp et certains autres didacticiels.See the 2D Drawing guide for more general information about the SkiaSharp library and some other tutorials.

Ce guide suppose que vous êtes familiarisé avec la programmation de Xamarin.Forms.This guide assumes that you are familiar with Xamarin.Forms programming.

Webinaire SkiaSharp pour Xamarin. FormsWebinar: SkiaSharp for Xamarin.Forms

Prérequis de SkiaSharpSkiaSharp Preliminaries

SkiaSharp pour Xamarin.Forms est empaqueté sous forme de package NuGet.SkiaSharp for Xamarin.Forms is packaged as a NuGet package. Une fois que vous avez créé une solution Xamarin.Forms dans Visual Studio ou Visual Studio pour Mac, vous pouvez utiliser le Gestionnaire de package NuGet pour rechercher le SkiaSharp.Views.Forms empaqueter et ajoutez-le à votre solution.After you've created a Xamarin.Forms solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the SkiaSharp.Views.Forms package and add it to your solution. Si vous cochez la références section de chaque projet après l’ajout de SkiaSharp, vous pouvez voir que divers SkiaSharp bibliothèques ont été ajoutées à chacun des projets dans la solution.If you check the References section of each project after adding SkiaSharp, you can see that various SkiaSharp libraries have been added to each of the projects in the solution.

Si votre application Xamarin.Forms cible iOS, utilisez la page de propriétés de projet pour modifier la cible de déploiement minimum à iOS 8.0.If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.

Dans n’importe quelle page c# qui utilise SkiaSharp, vous souhaiterez incluent un using directive pour le SkiaSharp espace de noms qui englobe tous les SkiaSharp classes, structures et énumérations que vous allez utiliser dans vos graphiques la programmation.In any C# page that uses SkiaSharp you'll want to include a using directive for the SkiaSharp namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. Il vous faudra également un using directive pour le SkiaSharp.Views.Forms espace de noms pour les classes spécifiques à Xamarin.Forms.You'll also want a using directive for the SkiaSharp.Views.Forms namespace for the classes specific to Xamarin.Forms. Il s’agit un beaucoup plus petit espace de noms, avec la classe la plus importante étant SKCanvasView .This is a much smaller namespace, with the most important class being SKCanvasView. Cette classe dérive de Xamarin.Forms View classe et héberge votre sortie graphique de SkiaSharp.This class derives from the Xamarin.Forms View class and hosts your SkiaSharp graphics output.

Important

Le SkiaSharp.Views.Forms espace de noms contient également un SKGLView classe qui dérive de View mais utilise OpenGL pour le rendu de graphiques.The SkiaSharp.Views.Forms namespace also contains an SKGLView class that derives from View but uses OpenGL for rendering graphics. Pour des raisons de simplicité, la limite de ce guide lui-même pour SKCanvasView, mais l’utilisation SKGLView au lieu de cela est assez semblable.For purposes of simplicity, this guide restricts itself to SKCanvasView, but using SKGLView instead is quite similar.

Principes de base de dessin SkiaSharpSkiaSharp Drawing Basics

Certaines des figures graphique la plus simple, que vous pouvez dessiner avec SkiaSharp sont des rectangles, des ovales et des cercles.Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. Dans l’affichage de ces chiffres, vous allez découvrir les coordonnées SkiaSharp, tailles et couleurs.In displaying these figures, you will learn about SkiaSharp coordinates, sizes, and colors. L’affichage de texte et des bitmaps est plus complexe, mais ces articles présentent également ces techniques.The display of text and bitmaps is more complex, but these articles also introduce those techniques.

Lignes et chemins d’accès SkiaSharpSkiaSharp Lines and Paths

Un chemin d’accès de graphiques est une série de lignes droites connectées et de courbes.A graphics path is a series of connected straight lines and curves. Chemins d’accès peuvent être tracés rempli, ou les deux.Paths can be stroked, filled, or both. Cet article comprend de nombreux aspects du dessin au trait, y compris les extrémités de trait et jointures et en pointillés et les lignes en pointillés, mais bloque les géométries de courbe.This article encompasses many aspects of line drawing, including stroke ends and joins, and dashed and dotted lines, but stops short of curve geometries.

Transformations SkiaSharpSkiaSharp Transforms

Transformations permettent aux objets de graphiques d’être uniformément traduite, mis à l’échelle, pivoté ou décalées.Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. Cet article montre également comment vous pouvez utiliser une matrice 3 x 3 transformation standard pour créer des transformations non affines et appliquer des transformations aux chemins d’accès.This article also shows how you can use a standard 3-by-3 transform matrix for creating non-affine transforms and applying transforms to paths.

Courbes et chemins d’accès SkiaSharpSkiaSharp Curves and Paths

L’exploration des chemins d’accès se poursuit avec l’ajout des courbes à des objets de chemin d’accès et d’exploiter les autres fonctionnalités puissantes de chemin d’accès.The exploration of paths continues with adding curves to a path objects, and exploiting other powerful path features. Vous verrez comment vous pouvez spécifier un chemin d’accès complet dans une chaîne de texte concis, comment utiliser les effets de chemin d’accès et comment aller dans les profondeurs de chemin d’accès.You'll see how you can specify an entire path in a concise text string, how to use path effects, and how to dig into path internals.

Bitmaps SkiaSharpSkiaSharp Bitmaps

Les images bitmap sont des tableaux rectangulaires de bits correspondent aux pixels de périphérique d’affichage.Bitmaps are rectangular arrays of bits corresponding to the pixels of a display device. Cette série d’articles montre comment charger, enregistrer, afficher, créer, dessiner sur, animer et accéder aux bits de bitmaps de SkiaSharp.This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.

Effets de SkiaSharpSkiaSharp Effects

Effets sont des propriétés que modifier l’affichage normal du graphique, y compris des dégradés linéaires et circulaires, bitmap en mosaïque, blend modes, le flou et autres utilisateurs.Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.