SkiaSharp-Grafiken in Xamarin.FormsSkiaSharp Graphics in Xamarin.Forms

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

Verwenden von SkiaSharp für 2D-Grafiken in Ihrer Xamarin.Forms-AnwendungenUse SkiaSharp for 2D graphics in your Xamarin.Forms applications

SkiaSharp ist ein 2D-Grafiken für .NET und c# unterstützt, die von der Open-Source-Skia-Grafik-Engine, die häufig in Google-Produkten verwendet wird.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. Sie können SkiaSharp in Ihrer Xamarin.Forms-Anwendungen verwenden, um 2D-Vektorgrafiken, Bitmaps und Text zu zeichnen.You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text. Finden Sie unter den Direct2D-Zeichnung Handbuch für weitere allgemeine Informationen über die SkiaSharp-Bibliothek und einige andere Lernprogramme.See the 2D Drawing guide for more general information about the SkiaSharp library and some other tutorials.

Dieses Handbuch wird davon ausgegangen, dass Sie mit Xamarin.Forms-Programmierung vertraut sind.This guide assumes that you are familiar with Xamarin.Forms programming.

Bin Skiasharp für xamarin. FormsWebinar: SkiaSharp for Xamarin.Forms

SkiaSharp-VorbereitungenSkiaSharp Preliminaries

SkiaSharp für Xamarin.Forms wird als ein NuGet-Paket verpackt.SkiaSharp for Xamarin.Forms is packaged as a NuGet package. Nachdem Sie eine Xamarin.Forms-Projektmappe in Visual Studio oder Visual Studio für Mac erstellt haben, können Sie den NuGet-Paket-Manager für die Suche nach der SkiaSharp.Views.Forms -Paket, und fügen sie der Projektmappe hinzu.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. Wenn Sie überprüfen die Verweise Abschnitt jedes Projekts nach dem Hinzufügen von SkiaSharp, Sie sehen, dass verschiedene SkiaSharp Bibliotheken wurden auf die einzelnen Projekte in der Projektmappe hinzugefügt.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.

Wenn Ihre Xamarin.Forms-Anwendung iOS ausgerichtet ist, verwenden Sie Eigenschaftenseite des Projekts, um die mindestbereitstellungsziels auf iOS 8.0 zu ändern.If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.

In jeder C#-Seite, die SkiaSharp verwendet werden sollen eine using -Direktive für den SkiaSharp -Namespace, der umfasst alle der SkiaSharp-Klassen, Strukturen und Enumerationen, die Sie in Ihren Grafiken verwenden Programmierung.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. Sollten Sie auch eine using -Direktive für den SkiaSharp.Views.Forms Namespace-URI für die Klassen, die spezifisch für Xamarin.Forms.You'll also want a using directive for the SkiaSharp.Views.Forms namespace for the classes specific to Xamarin.Forms. Dies ist eine viel kleinere Namespace, wobei die wichtigste Klasse SKCanvasView .This is a much smaller namespace, with the most important class being SKCanvasView. Diese Klasse wird von der Xamarin.Forms View Klasse und Ihre SkiaSharp-Grafikausgabe hostet.This class derives from the Xamarin.Forms View class and hosts your SkiaSharp graphics output.

Wichtig

Die SkiaSharp.Views.Forms Namespace enthält auch eine SKGLView abgeleitete Klasse View , aber OpenGL für Rendern von Grafiken verwendet.The SkiaSharp.Views.Forms namespace also contains an SKGLView class that derives from View but uses OpenGL for rendering graphics. Zum Zwecke der Einfachheit halber wird in der vorliegenden beschränkt selbst SKCanvasView, während mit SKGLView stattdessen ist sehr ähnlich.For purposes of simplicity, this guide restricts itself to SKCanvasView, but using SKGLView instead is quite similar.

Grundlagen von SkiaSharp-ZeichnungenSkiaSharp Drawing Basics

Einige der einfachste Grafiken Abbildungen, die Sie mit SkiaSharp zeichnen können sind Kreise, Ovale und Rechtecke.Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. Bei der Anzeige dieser Zahlen, erfahren Sie mehr über SkiaSharp-Koordinaten, Größen und Farben.In displaying these figures, you will learn about SkiaSharp coordinates, sizes, and colors. Die Anzeige von Text und Bitmaps ist komplexer, aber in diesen Artikeln werden auch diese Techniken eingeführt.The display of text and bitmaps is more complex, but these articles also introduce those techniques.

SkiaSharp-Linien und -PfadeSkiaSharp Lines and Paths

Ein Grafikpfad ist eine Reihe verbundener gerader Linien und Kurven.A graphics path is a series of connected straight lines and curves. Pfade können gestrichelt, ausgefüllt wird, oder beides.Paths can be stroked, filled, or both. In diesem Artikel umfasst viele Aspekte der einschließlich Linienenden und Joins sowie gestrichelte Linie zeichnen und gepunkteten Linien, aber beendet, ohne die Kurve Geometrien.This article encompasses many aspects of line drawing, including stroke ends and joins, and dashed and dotted lines, but stops short of curve geometries.

SkiaSharp-TransformationenSkiaSharp Transforms

Transformationen können Grafikobjekte, einheitlich übersetzt, skaliert, gedreht oder verzerrt werden.Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. In diesem Artikel wird auch gezeigt, wie Sie eine standardmäßige 3 x 3-Transformationsmatrix für nicht affine Transformationen zu erstellen und Anwenden von Transformationen auf Pfade verwenden können.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.

SkiaSharp-Kurven und -PfadeSkiaSharp Curves and Paths

Die Auswertung der Pfade, die mit dem Hinzufügen der Kurven in einer Pfadobjekte und Ausnutzen von anderen leistungsstarken Pfad-Funktionen wird fortgesetzt.The exploration of paths continues with adding curves to a path objects, and exploiting other powerful path features. Sie sehen, wie Sie einen vollständigen Pfad in einer präzisen Textzeichenfolge angeben können, wie pfadeffekte verwendet und wie Sie die Pfad-Interna sprengen.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.

SkiaSharp-BitmapsSkiaSharp Bitmaps

Bitmaps sind rechteckige Arrays von Bits, die für die Pixel der ein Anzeigegerät.Bitmaps are rectangular arrays of bits corresponding to the pixels of a display device. Diese Artikelreihe veranschaulicht laden, speichern, anzeigen, erstellen, gezeichnet werden soll, animieren und Zugriff auf die Bits von SkiaSharp-Bitmaps.This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.

SkiaSharp-AuswirkungenSkiaSharp Effects

Effekte sind Eigenschaften, die die normale Anzeige von Grafiken, einschließlich der Gradienten für lineare und runde Ausführungen ändern, bitmap-Kacheln, blend-Modi, blur- und andere.Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.