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 SimpleCirclePage
auf. 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:
Info
vom TypSKImageInfo
Surface
vom 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 SKCanvas
ist 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 SKColor
fest. Eine Möglichkeit zum Abrufen eines SKColor
Werts besteht darin, einen Xamarin.FormsColor
Wert mithilfe der Erweiterungsmethode ToSKColor
in 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.