This provides a brief introduction to the concepts behind SkiaSharp

SkiaSharp provides a rich and powerful 2D graphics API that can be used to render into 2D buffers. You can use these to implement custom user interface elements and 2D graphics that can be incorporated into your application. SkiaSharp is a .NET binding to the Skia library and inherits the features and power of this library.

The library is currently available as a cross-platform NuGet Package, you can it to your project by adding the NuGet reference.

To draw, your code will create an SkCanvas which describes the surface where the drawing operations will take place.

Obtaining an SKCanvas

using (var surface = SKSurface.Create (width: 640, height: 480, SKImageInfo.PlatformColorType, SKAlphaType.Premul)) {
    SKCanvas myCanvas = surface.Canvas;

    // Your drawing code goes here.
}

Drawing on SKCanvas

The SKCanvas uses a drawing model similar in spirit to other drawing models that you might be familiar with, it uses colors with an optional transparency channel and can draw lines, arcs, text and images.

Below are just a few of the many different things that can be done with SkiaSharp. In the examples below the variable canvas is of type SKCanvas.

Drawing Xamagon

This example draws Xamarin's logo the Xamagon:

// clear the canvas / fill with white
canvas.Clear (SKColors.White);

// set up drawing tools
using (var paint = new SKPaint ()) {
  paint.IsAntialias = true;
  paint.Color = new SKColor (0x2c, 0x3e, 0x50);
  paint.StrokeCap = SKStrokeCap.Round;

  // create the Xamagon path
  using (var path = new SKPath ()) {
    path.MoveTo (71.4311121f, 56f);
    path.CubicTo (68.6763107f, 56.0058575f, 65.9796704f, 57.5737917f, 64.5928855f, 59.965729f);
    path.LineTo (43.0238921f, 97.5342563f);
    path.CubicTo (41.6587026f, 99.9325978f, 41.6587026f, 103.067402f, 43.0238921f, 105.465744f);
    path.LineTo (64.5928855f, 143.034271f);
    path.CubicTo (65.9798162f, 145.426228f, 68.6763107f, 146.994582f, 71.4311121f, 147f);
    path.LineTo (114.568946f, 147f);
    path.CubicTo (117.323748f, 146.994143f, 120.020241f, 145.426228f, 121.407172f, 143.034271f);
    path.LineTo (142.976161f, 105.465744f);
    path.CubicTo (144.34135f, 103.067402f, 144.341209f, 99.9325978f, 142.976161f, 97.5342563f);
    path.LineTo (121.407172f, 59.965729f);
    path.CubicTo (120.020241f, 57.5737917f, 117.323748f, 56.0054182f, 114.568946f, 56f);
    path.LineTo (71.4311121f, 56f);
    path.Close ();

    // draw the Xamagon path
    canvas.DrawPath (path, paint);
  }
}

Drawing Text

// clear the canvas / fill with white
canvas.DrawColor (SKColors.White);

// set up drawing tools
using (var paint = new SKPaint ()) {
  paint.TextSize = 64.0f;
  paint.IsAntialias = true;
  paint.Color = new SKColor (0x42, 0x81, 0xA4);
  paint.IsStroke = false;

  // draw the text
  canvas.DrawText ("Skia", 0.0f, 64.0f, paint);
}

Drawing Bitmaps

Stream fileStream = File.OpenRead ("MyImage.png");

// clear the canvas / fill with white
canvas.DrawColor (SKColors.White);

// decode the bitmap from the stream
using (var stream = new SKManagedStream(fileStream))
using (var bitmap = SKBitmap.Decode(stream))
using (var paint = new SKPaint()) {
  canvas.DrawBitmap(bitmap, SKRect.Create(Width, Height), paint);
}

Drawing with Image Filters

Stream fileStream = File.OpenRead ("MyImage.png"); // open a stream to an image file

// clear the canvas / fill with white
canvas.DrawColor (SKColors.White);

// decode the bitmap from the stream
using (var stream = new SKManagedStream(fileStream))
using (var bitmap = SKBitmap.Decode(stream))
using (var paint = new SKPaint()) {
  // create the image filter
  using (var filter = SKImageFilter.CreateBlur(5, 5)) {
    paint.ImageFilter = filter;

    // draw the bitmap through the filter
    canvas.DrawBitmap(bitmap, SKRect.Create(width, height), paint);
  }
}

More information

More information about using SkiaSharp can be found on the API documentation online

SkiaSharp Tutorials for Xamarin.Forms

Learn how to work with cross platform graphics that render in Xamarin.Forms:

• Basics
  • Draw a circle
  • Respond to touch
  • Pixels and device-independent units
  • Scaling
  • Animation
  • Integrating text
• Lines and Paths
  • Stroke caps
  • Disconnected lines
  • Simple paths
  • Stroke joins
  • Fill types
  • Dots and dashes