# SkiaSharp

SkiaSharp is a 2D graphics system for .NET powered by the open-source Skia graphics engine that is used extensively in Google products. You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text.

The nuget [`Fabulous.XamarinForms.SkiaSharp`](https://www.nuget.org/packages/Fabulous.XamarinForms.SkiaSharp) implements a view component for the type [SKCanvasView](https://developer.xamarin.com/api/type/SkiaSharp.Views.Forms.SKCanvasView/).

<figure><img src="https://1507369121-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxUB2nvdS2ZeDSvWhgnZ%2Fuploads%2Fgit-blob-8e3ea2d54b4a0a276d317c9bdee8b829cc83b766%2Fimage%20(2).png?alt=media" alt=""><figcaption></figcaption></figure>

To use `Fabulous.XamarinForms.SkiaSharp`, you must

1. Add a reference to `SkiaSharp.Views.Forms` across your whole solution. This will add appropriate references to your platform-specific Android and iOS projects too.
2. Next add a reference to `Fabulous.XamarinForms.SkiaSharp` across your whole solution.

After these steps you can use SkiaSharp in your view function. Here is a simple example of using SkiaSharp to draw a circle and respond to touch events:

```fsharp
open Fabulous.XamarinForms

View.SKCanvasView(enableTouchEvents = true,
    paintSurface = (fun args ->
        let info = args.Info
        let surface = args.Surface
        let canvas = surface.Canvas

        canvas.Clear()
        use paint = new SKPaint(Style = SKPaintStyle.Stroke, Color = Color.Red.ToSKColor(), StrokeWidth = 25.0f)
        canvas.DrawCircle(float32 (info.Width / 2), float32 (info.Height / 2), 100.0f, paint)
    ),
    touch = (fun args ->
        printfn "touch event at (%f, %f)" args.Location.X args.Location.Y
    )
)
```

By default, the view will not be redrawn when the model changes. You should set `invalidate` to true when you know that a redraw is needed. Set it back to false when done, otherwise it will be redrawn at each update.

```fsharp
View.SKCanvasView(..., invalidate = true)
```