Disegno di un cerchio semplice in SkiaSharp

Informazioni di base sul disegno SkiaSharp, incluse le aree di disegno e gli oggetti di disegno

Questo articolo presenta i concetti relativi alla grafica di disegno nell'uso Xamarin.Forms di SkiaSharp, inclusa la creazione di un SKCanvasView oggetto per ospitare la grafica, la gestione dell'evento e l'uso PaintSurface di un SKPaint oggetto per specificare il colore e altri attributi di disegno.

Il programma di esempio contiene tutto il codice di esempio per questa serie di articoli skiaSharp. La prima pagina ha il titolo Simple Circle e richiama la classe SimpleCirclePagedi pagina . Questo codice mostra come disegnare un cerchio al centro della pagina con un raggio di 100 pixel. Il contorno del cerchio è rosso e l'interno del cerchio è blu.

La SimpleCircle classe page deriva da ContentPage e contiene due using direttive per gli spazi dei nomi SkiaSharp:

using SkiaSharp;
using SkiaSharp.Views.Forms;

Il costruttore seguente della classe crea un SKCanvasView oggetto, associa un gestore per l'evento PaintSurface e imposta l'oggetto SKCanvasView come contenuto della pagina:

public SimpleCirclePage()
{
    Title = "Simple Circle";

    SKCanvasView canvasView = new SKCanvasView();
    canvasView.PaintSurface += OnCanvasViewPaintSurface;
    Content = canvasView;
}

Occupa SKCanvasView l'intera area del contenuto della pagina. In alternativa, è possibile combinare un oggetto SKCanvasView con altri Xamarin.FormsView derivati, come si vedrà in altri esempi.

Il PaintSurface gestore eventi è la posizione in cui si esegue tutto il disegno. Questo metodo può essere chiamato più volte mentre il programma è in esecuzione, quindi deve mantenere tutte le informazioni necessarie per ricreare la visualizzazione grafica:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    ...
}

L'oggetto SKPaintSurfaceEventArgs che accompagna l'evento ha due proprietà:

• Info di tipo SKImageInfo
• Surface di tipo SKSurface

La SKImageInfo struttura contiene informazioni sulla superficie di disegno, soprattutto la larghezza e l'altezza in pixel. L'oggetto SKSurface rappresenta la superficie di disegno stessa. In questo programma, la superficie di disegno è una visualizzazione video, ma in altri programmi un SKSurface oggetto può anche rappresentare una bitmap su cui si utilizza SkiaSharp per disegnare.

La proprietà più importante di SKSurface è Canvas di tipo SKCanvas. Questa classe è un contesto di disegno grafico utilizzato per eseguire il disegno effettivo. L'oggetto SKCanvas incapsula uno stato grafico, che include trasformazioni grafiche e ritagli.

Ecco un inizio tipico di un PaintSurface gestore eventi:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();
    ...
}

Il Clear metodo cancella l'area di disegno con un colore trasparente. Un overload consente di specificare un colore di sfondo per l'area di disegno.

L'obiettivo è di disegnare un cerchio rosso pieno di blu. Poiché questa particolare immagine grafica contiene due colori diversi, il processo deve essere eseguito in due passaggi. Il primo passaggio consiste nel disegnare il contorno del cerchio. Per specificare il colore e altre caratteristiche della linea, creare e inizializzare un SKPaint oggetto:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    ...
    SKPaint paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = Colors.Red.ToSKColor(),
        StrokeWidth = 25
    };
    ...
}

La Style proprietà indica che si desidera tracciareuna linea (in questo caso il contorno del cerchio) anziché riempire l'interno. I tre membri dell'enumerazione SKPaintStyle sono i seguenti:

• Fill
• Stroke
• StrokeAndFill

Il valore predefinito è Fill. Usare la terza opzione per tracciare la linea e riempire l'interno con lo stesso colore.

Impostare la Color proprietà su un valore di tipo SKColor. Un modo per ottenere un SKColor valore consiste nel convertire un Xamarin.FormsColor valore in un SKColor valore usando il metodo ToSKColordi estensione . La Extensions classe nello spazio dei SkiaSharp.Views.Forms nomi include altri metodi che eseguono la conversione tra Xamarin.Forms valori e valori SkiaSharp.

La StrokeWidth proprietà indica lo spessore della linea. Qui è impostato su 25 pixel.

Usare tale SKPaint oggetto per disegnare il cerchio:

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    ...
    canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
    ...
}

Le coordinate vengono specificate in relazione all'angolo superiore sinistro della superficie di visualizzazione. Le coordinate X aumentano a destra e le coordinate Y aumentano. Nella discussione sulla grafica, spesso la notazione matematica (x, y) viene usata per indicare un punto. Il punto (0, 0) è l'angolo superiore sinistro della superficie di visualizzazione e viene spesso chiamato origine.

I primi due argomenti di DrawCircle indicano le coordinate X e Y del centro del cerchio. Questi vengono assegnati a metà della larghezza e dell'altezza della superficie di visualizzazione per posizionare il centro del cerchio al centro della superficie di visualizzazione. Il terzo argomento specifica il raggio del cerchio e l'ultimo argomento è l'oggetto SKPaint .

Per riempire l'interno del cerchio, è possibile modificare due proprietà dell'oggetto SKPaint e chiamare DrawCircle di nuovo. Questo codice mostra anche un modo alternativo per ottenere un SKColor valore da uno dei molti campi della SKColors struttura:

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);
}

Questa volta, la DrawCircle chiamata riempie il cerchio usando le nuove proprietà dell'oggetto SKPaint .

Ecco il programma in esecuzione in iOS e Android:

Quando si esegue il programma manualmente, è possibile girare il telefono o il simulatore lateralmente per vedere come viene ridisegnato l'elemento grafico. Ogni volta che l'elemento grafico deve essere ridisegnato, viene chiamato di nuovo il PaintSurface gestore eventi.

È anche possibile colorare oggetti grafici con sfumature o riquadri bitmap. Queste opzioni sono descritte nella sezione sugli shader SkiaSharp.

Un SKPaint oggetto è poco più di una raccolta di proprietà di disegno grafico. Questi oggetti sono leggeri. È possibile riutilizzare SKPaint gli oggetti in questo programma oppure creare più SKPaint oggetti per varie combinazioni di proprietà di disegno. È possibile creare e inizializzare questi oggetti all'esterno del PaintSurface gestore eventi ed è possibile salvarli come campi nella classe della pagina.

Nota

La SKPaint classe definisce un oggetto IsAntialias per abilitare l'anti-aliasing nel rendering della grafica. L'anti-aliasing in genere comporta bordi visivamente più uniformi, pertanto è probabile che si voglia impostare questa proprietà su true nella maggior parte degli SKPaint oggetti. Ai fini della semplicità, questa proprietà non è impostata nella maggior parte delle pagine di esempio.

Anche se la larghezza del contorno del cerchio è specificata come 25 pixel , o un quarto del raggio del cerchio, sembra essere più sottile e c'è un buon motivo per questo: metà della larghezza della linea è oscurata dal cerchio blu. Gli argomenti del DrawCircle metodo definiscono le coordinate geometriche astratte di un cerchio. L'interno blu viene ridimensionato fino al pixel più vicino, ma il contorno a 25 pixel si ingrande il cerchio geometrico , metà sull'interno e metà sull'esterno.

L'esempio seguente dell'articolo Integrazione con Xamarin.Forms illustra visivamente questo aspetto.

Collegamenti correlati

• API SkiaSharp