Zeichnen eines einfachen Kreises in SkiaSharp
Lernen Sie die Grundlagen der SkiaSharp-Zeichnung kennen, einschließlich Leinwänden und Malobjekten
In diesem Artikel werden die Konzepte der Zeichnungsgrafiken in Xamarin.Forms der Verwendung von SkiaSharp vorgestellt, einschließlich des Erstellens eines SKCanvasView Objekts zum Hosten der Grafiken, behandeln des PaintSurface Ereignisses und Verwenden eines SKPaint Objekts zum Angeben von Farbe und anderen Zeichnungsattributen.
Das Beispielprogramm enthält den gesamten Beispielcode für diese Reihe von SkiaSharp-Artikeln. Die erste Seite hat den Titel "Einfacher Kreis " und ruft die Seitenklasse SimpleCirclePageauf. Dieser Code zeigt, wie ein Kreis in der Mitte der Seite mit einem Radius von 100 Pixeln gezeichnet wird. Die Kontur des Kreises ist rot, und das Innere des Kreises ist blau.
Die SimpleCircle Seitenklasse abgeleitet ContentPage von und enthält zwei using Direktiven für die SkiaSharp-Namespaces:
using SkiaSharp;
using SkiaSharp.Views.Forms;
Der folgende Konstruktor der Klasse erstellt ein SKCanvasView Objekt, fügt einen Handler für das PaintSurface Ereignis an und legt das SKCanvasView Objekt als Inhalt der Seite fest:
public SimpleCirclePage()
{
Title = "Simple Circle";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
Der SKCanvasView gesamte Inhaltsbereich der Seite wird belegt. Alternativ können Sie eine SKCanvasView kombinationsweise mit anderen Xamarin.FormsView Ableitungen kombinieren, wie sie in anderen Beispielen zu sehen sind.
Der PaintSurface Ereignishandler ist der Ort, an dem Sie ihre gesamte Zeichnung ausführen. Diese Methode kann während der Ausführung des Programms mehrmals aufgerufen werden. Daher sollte Standard sie alle informationen enthalten, die erforderlich sind, um die Grafikanzeige neu zu erstellen:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
}
Das SKPaintSurfaceEventArgs Objekt, das das Ereignis begleitet, verfügt über zwei Eigenschaften:
Infovom TypSKImageInfoSurfacevom TypSKSurface
Die SKImageInfo Struktur enthält Informationen über die Zeichnungsoberfläche, vor allem die Breite und Höhe in Pixeln. Das SKSurface Objekt stellt die Zeichnungsoberfläche selbst dar. In diesem Programm ist die Zeichnungsoberfläche eine Videoanzeige, aber in anderen Programmen kann ein SKSurface Objekt auch eine Bitmap darstellen, auf die Sie SkiaSharp zum Zeichnen verwenden.
Die wichtigste Eigenschaft des SKSurface Typs SKCanvasist Canvas . Diese Klasse ist ein Grafikzeichnungskontext, den Sie zum Ausführen der tatsächlichen Zeichnung verwenden. Das SKCanvas Objekt kapselt einen Grafikzustand, der Grafiktransformationen und Clipping umfasst.
Hier ist ein typischer Start eines PaintSurface Ereignishandlers:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
...
}
Die Clear Methode löscht den Zeichenbereich mit einer transparenten Farbe. Mit einer Überladung können Sie eine Hintergrundfarbe für den Zeichenbereich angeben.
Ziel ist es hier, einen roten Kreis zu zeichnen, der mit Blau gefüllt ist. Da dieses bestimmte Grafikbild zwei verschiedene Farben enthält, muss der Auftrag in zwei Schritten ausgeführt werden. Der erste Schritt besteht darin, die Kontur des Kreises zu zeichnen. Um die Farbe und andere Merkmale der Linie anzugeben, erstellen und initialisieren Sie ein SKPaint Objekt:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
SKPaint paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = Colors.Red.ToSKColor(),
StrokeWidth = 25
};
...
}
Die Style Eigenschaft gibt an, dass Sie eine Linie (in diesem Fall die Kontur des Kreises) strichen möchten, anstatt den Innenbereich auszufüllen. Die drei Elemente der SKPaintStyle Enumeration sind wie folgt:
Der Standardwert ist Fill. Verwenden Sie die dritte Option, um die Linie zu strichen und den Innenraum mit derselben Farbe zu füllen.
Legen Sie die Color Eigenschaft auf einen Wert vom Typ SKColorfest. Eine Möglichkeit zum Abrufen eines SKColor Werts besteht darin, einen Xamarin.FormsColor Wert mithilfe der Erweiterungsmethode ToSKColorin einen SKColor Wert zu konvertieren. Die Extensions Klasse im SkiaSharp.Views.Forms Namespace enthält andere Methoden, die zwischen Xamarin.Forms Werten und SkiaSharp-Werten konvertiert werden.
Die StrokeWidth Eigenschaft gibt die Stärke der Linie an. Hier ist sie auf 25 Pixel festgelegt.
Sie verwenden dieses SKPaint Objekt, um den Kreis zu zeichnen:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
...
}
Koordinaten werden relativ zur oberen linken Ecke der Anzeigeoberfläche angegeben. X-Koordinaten werden nach rechts vergrößert, und die Y-Koordinaten werden nach unten erhöht. Im Gespräch mit Grafiken wird häufig die mathematische Schreibweise (x, y) verwendet, um einen Punkt zu kennzeichnen. Der Punkt (0, 0) ist die obere linke Ecke der Anzeigeoberfläche und wird häufig als Ursprung bezeichnet.
Die ersten beiden Argumente geben DrawCircle die X- und Y-Koordinaten der Mitte des Kreises an. Diese werden halber Breite und Höhe der Anzeigeoberfläche zugewiesen, um die Mitte des Kreises in der Mitte der Anzeigeoberfläche zu platzieren. Das dritte Argument gibt den Radius des Kreises an, und das letzte Argument ist das SKPaint Objekt.
Um den Inneren des Kreises auszufüllen, können Sie zwei Eigenschaften des SKPaint Objekts ändern und erneut aufrufen DrawCircle . Dieser Code zeigt auch eine alternative Methode zum Abrufen eines SKColor Werts aus einem der vielen Felder der SKColors Struktur:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
paint.Style = SKPaintStyle.Fill;
paint.Color = SKColors.Blue;
canvas.DrawCircle(args.Info.Width / 2, args.Info.Height / 2, 100, paint);
}
Dieses Mal füllt der DrawCircle Aufruf den Kreis mithilfe der neuen Eigenschaften des SKPaint Objekts aus.
Hier ist das Programm, das unter iOS und Android ausgeführt wird:
Wenn Sie das Programm selbst ausführen, können Sie das Telefon oder den Simulator seitwärts drehen, um zu sehen, wie die Grafik neu gezeichnet wird. Jedes Mal, wenn die Grafik neu gezeichnet werden muss, wird der PaintSurface Ereignishandler erneut aufgerufen.
Es ist auch möglich, grafische Objekte mit Farbverläufen oder Bitmap-Kacheln zu färben. Diese Optionen werden im Abschnitt zu SkiaSharp-Shadern erläutert.
Ein SKPaint Objekt ist wenig mehr als eine Auflistung von Grafikzeichnungseigenschaften. Diese Objekte sind leicht. Sie können Objekte wie dieses Programm wiederverwenden SKPaint oder mehrere Objekte für verschiedene SKPaint Kombinationen von Zeichnungseigenschaften erstellen. Sie können diese Objekte außerhalb des PaintSurface Ereignishandlers erstellen und initialisieren, und Sie können sie als Felder in Ihrer Seitenklasse speichern.
Hinweis
Die SKPaint Klasse definiert eine IsAntialias Zum Aktivieren der Antialiasierung beim Rendern Ihrer Grafiken. Antialiasing führt in der Regel zu visuell glatteren Kanten, sodass Sie diese Eigenschaft true wahrscheinlich in den meisten Ihrer SKPaint Objekte festlegen möchten. Aus Gründen der Einfachheit wird diese Eigenschaft nicht auf den meisten Beispielseiten festgelegt.
Obwohl die Breite der Kontur des Kreises als 25 Pixel oder ein Viertel des Radius des Kreises angegeben ist, scheint es dünner zu sein, und es gibt einen guten Grund dafür: Die Hälfte der Breite der Linie wird vom blauen Kreis verdeckt. Die Argumente für die DrawCircle Methode definieren die abstrakten geometrischen Koordinaten eines Kreises. Der blaue Innenbereich wird auf diese Dimension auf das nächste Pixel angepasst, aber die 25 Pixel breite Kontur streut den geometrischen Kreis - die Hälfte auf der Innenseite und die Hälfte auf der Außenseite.
Im nächsten Beispiel im Artikel "Integrieren in Xamarin.Forms " wird dies visuell veranschaulicht.