Skia Sharp

Wichtig

Dieses Projekt ist ein experimentelles Release. Wir hoffen, dass Sie Experimentelle Mobile Blazor Bindings ausprobieren und Feedback unter https://github.com/xamarin/MobileBlazorBindingsgeben.

Skia ist eine von Google verwaltete 2D-Grafikbibliothek, die in .NET-Anwendungen mithilfe der SkiaSharp-Bibliothek verwendet werden kann. SkiaSharp ist in Mobilen Blazor Bindings-Apps mit dem Microsoft.MobileBlazorBindings.SkiaSharp NuGet-Paket verfügbar, das auf SkiaSharp.Views.Formsaufbaut.

In diesem Leitfaden werden die Grundlagen des Hinzufügens eines Skia Sharp Canvas zu einer Razor-Komponente zur Verwendung in einer Mobile Blazor Bindings-App behandelt. Alle anderen API sind identisch und werden in SkiaSharp Graphics in Xamarin.Forms behandelt.

Einrichten

Installieren Sie zunächst die folgenden NuGet-Pakete:

1. Installieren Sie im .NET Standard-Projekt mit Ihren Razor-Dateien das Microsoft.MobileBlazorBindings.SkiaSharp NuGet-Paket.
2. Installieren Sie die plattformspezifischen NuGet-Pakete in jedem Plattformprojekt:
   1. Android-, iOS-, macOS- und Windows-Projekte: Installieren Sie das SkiaSharp.Views.Forms NuGet-Paket.
   2. Windows-Projekte: Installieren Sie die SkiaSharp.Views.WPF Pakete und SkiaSharp.Views.Forms.WPF NuGet.

Fügen Sie in der _Imports.razor Datei im Stammverzeichnis des Projekts die folgenden Zeilen hinzu, um die SkiaSharp-Komponenten und -APIs in alle Razor-Dateien zu importieren:

@using Microsoft.MobileBlazorBindings.SkiaSharp
@using SkiaSharp
@using SkiaSharp.Views.Forms

Verwendung

Fügen Sie in Ihrer Razor-Komponente eine SKCanvasView Komponente hinzu, und legen Sie das OnPaintSurface Ereignis auf eine Methode mit dem Namen fest PaintSurface:

<ContentView>
    ...
        <SKCanvasView OnPaintSurface="PaintSurface"/>
    ...
</ContentView>

Fügen Sie im @code Block eine Methode PaintSurface hinzu, die einen Parameter vom Typ SKPaintSurfaceEventArgsakzeptiert. Diese Methode ist der einzige Ort, an dem Sie mit der Canvas interagieren, auf die über die Surface.Canvas -Eigenschaft des bereitgestellten SKPaintSurfaceEventArgszugegriffen wird.

Die Razor-Datei sollte nun wie folgt aussehen:

<ContentView>
    <StackLayout Padding="20">
        <SKCanvasView OnPaintSurface="PaintSurface"/>
    </StackLayout>
</ContentView>

@code
{
    void PaintSurface(SKPaintSurfaceEventArgs e)
    {
        // TODO: SkiaSharp painting code goes here
    }
}

Sobald Sie einen Verweis auf den Canvas haben, können Sie Pfade, Formen, Bilder usw. hinzufügen. Um zu beginnen, können Sie den Zeichenbereich löschen, eine Hintergrundfarbe festlegen und eine Zeile hinzufügen:

void PaintSurface(SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.Green);
    var paint = new SKPaint { Color = SKColors.SkyBlue, };
    canvas.DrawLine(0, 0, 200, 200, paint);
}

Alternativ können Sie mit diesem Code ein Liniendiagramm zusammen mit einer Face zeichnen:

    void PaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
        canvas.Clear(SKColors.LightGray);

        // Draw outline
        var outlinePaint = new SKPaint { Color = SKColors.White, StrokeWidth = 2, };
        canvas.DrawRoundRect(5, 5, 410, 410, 5, 5, outlinePaint);

        // Draw axes
        var axisPaint = new SKPaint { Color = SKColors.DarkGray, StrokeWidth = 5, };
        canvas.DrawLine(20, 20, 20, 410, axisPaint);
        canvas.DrawLine(10, 400, 400, 400, axisPaint);

        // Draw graph
        var yValues = new[] { 10, 100, 160, 120, 180, 350 };
        var graphLinePaint = new SKPaint { Color = SKColors.DarkBlue, StrokeWidth = 4, };
        var graphPointPaint = new SKPaint { Color = SKColors.LightBlue, StrokeWidth = 4, };

        for (int i = 0; i < yValues.Length; i++)
        {
            var fromPoint = new SKPoint(i * 70 + 20, 400 - yValues[i]);
            if (i != yValues.Length - 1)
            {
                var toPoint = new SKPoint((i + 1) * 70 + 20, 400 - yValues[i + 1]);
                canvas.DrawLine(fromPoint, toPoint, graphLinePaint);
            }
            canvas.DrawCircle(fromPoint, radius: 8, graphPointPaint);
        }

        // Draw face
        var facePaint = new SKPaint { Color = SKColors.Yellow, StrokeWidth = 3, };
        canvas.DrawArc(new SKRect(50, 450, 450, 900), startAngle: 30, sweepAngle: 120, useCenter: false, facePaint);
        canvas.DrawCircle(125, 600, 30, facePaint);
        canvas.DrawCircle(375, 600, 30, facePaint);
    }

Das ist alles, was Sie benötigen, um SkiaSharp in einer Mobile Blazor Bindings-App zum Laufen zu bringen. Von hier an ist alles gleich wie in der Xamarin.Forms SkiaSharp-Dokumentation. Ein Beispiel für SkiaSharp in Mobile-Bindungen finden Sie SkiaCanvasDemo.razorSkiaCanvasDemo.razor.cs im Und im Beispiel des Steuerelementkatalogs.

Problembehandlung

Wenn Sie eine Fehlermeldung über fehlende Bibliotheken wie Error: framework not found libSkiaSharperhalten, überprüfen Sie, ob Sie das plattformspezifische NuGet-Paket in jedem plattformspezifischen Projekt (z. B. iOS, Android und Windows) installiert haben, wie im Abschnitt "Setup " beschrieben.