Post
Ask Question

Getting Started With SkiaSharp With Xamarin.Forms

A couple of months back, I wrote about Using OxyPlot with Xamarin Forms, where we created a few graphs to show data. But, what if a situation arises where we have to draw something like in the following image?


Oxyplot doesn’t support this, but we have another open source .Net library to our rescue. It’s Skiasharp. It’s fully cross-platform with rich 2D graphics drawing API powered by Google’s Skia library. This post will be a step by step guide to creating an image the same as the one shown above using SkiaSharp library in a Xamarin.Forms app. So, let’s get started.

  1. Create a new Xamarin.Forms project with PCL (I prefer PCL over Shared project but that’s just me you can use your preference too).

  2. Right click on the Solution file and select Manage NuGet Packages For Solution…from the context menu. It will open NuGet-Solution.

  3. Click on the Browse tab if it’s not selected by default and write SkiSharp in the search text-box. It will list all the SkiaSharp libraries available in NuGet.The one which is used for Xamarin.Forms is called View.Forms. Select and install it as shown in below image.

    Xamarin

  4. Once the NuGets are installed, we can add the SkiaSharp View to the XAML. Here, we’re adding a SKCanvasView, the CPU-based drawing surface. HTML developers can relate this to their canvas :).
    Also, we need to register the SkiaSharpassembly to use in XAML just like any other third party control.

  5. Following is the code for XAML of sample application.

    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SkiaSharpEx" xmlns:sk="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms" x:Class="SkiaSharpEx.MainPage" Title="SkiaSharp Forms Example" Padding="10">  
    3.     <sk:SKCanvasView x:Name="canvasView" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" PaintSurface="OnCanvasViewPaintSurface" />   
    4. </ContentPage>  
  1. The main event which is used to draw anything on SKCanvasView is PaintSurface and as you can see from the above code, we are handling this event in OnCanvasViewPaintSurface method.

  2. Following is the code ofstrong>OnCanvasViewPaintSurface method.

    1. void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args) {  
    2.     //Initialize the Canvas  
    3.     SKSurface vSurface = args.Surface;  
    4.     SKCanvas vCanvas = vSurface.Canvas;  
    5.     //Clear the Canvas  
    6.     vCanvas.Clear();  
    7.     //Creating the Paint object to color the Items  
    8.     SKPaint vBlackPaint = new SKPaint {  
    9.         Color = SKColors.Black,  
    10.             StrokeWidth = 5,  
    11.             StrokeCap = SKStrokeCap.Round,  
    12.             TextSize = 60  
    13.     };  
    14.     SKPaint vWhitePaint = new SKPaint {  
    15.         Color = SKColors.White  
    16.     };  
    17.     var vRectangle = new SKRect(100, 100, 900, 900);  
    18.     vCanvas.DrawRect(vRectangle, vBlackPaint);  
    19.     var vWhiteRectangle = new SKRect(105, 105, 895, 895);  
    20.     vCanvas.DrawRect(vWhiteRectangle, vWhitePaint);  
    21.     //Diagnol Lines  
    22.     vCanvas.DrawLine(100, 100, 900, 900, vBlackPaint);  
    23.     vCanvas.DrawLine(900, 100, 100, 900, vBlackPaint);  
    24.     //Drawing the Numbers between the lines  
    25.     vCanvas.DrawText("1", 500, 300, vBlackPaint);  
    26.     vCanvas.DrawText("2", 260, 200, vBlackPaint);  
    27.     vCanvas.DrawText("3", 150, 350, vBlackPaint);  
    28.     vCanvas.DrawText("4", 250, 500, vBlackPaint);  
    29.     vCanvas.DrawText("5", 150, 700, vBlackPaint);  
    30.     vCanvas.DrawText("6", 260, 800, vBlackPaint);  
    31.     vCanvas.DrawText("7", 500, 700, vBlackPaint);  
    32.     vCanvas.DrawText("8", 670, 830, vBlackPaint);  
    33.     vCanvas.DrawText("9", 780, 700, vBlackPaint);  
    34.     vCanvas.DrawText("10", 670, 500, vBlackPaint);  
    35.     vCanvas.DrawText("11", 780, 350, vBlackPaint);  
    36.     vCanvas.DrawText("12", 670, 200, vBlackPaint);  
    37.     //The Side lines for creating other boxes  
    38.     vCanvas.DrawLine(100, 500, 500, 100, vBlackPaint);  
    39.     vCanvas.DrawLine(100, 500, 500, 900, vBlackPaint);  
    40.     vCanvas.DrawLine(500, 100, 900, 500, vBlackPaint);  
    41.     vCanvas.DrawLine(500, 900, 900, 500, vBlackPaint);  
    42. }  
  • OnCanvasViewPaintSurface Method Explained -
    1. In the above code, first we are initializing the Canvas by pulling the objects from SKPaintSurfaceEventArgsof the method and then clearing it so that whenever this event is executed, a fresh graphic is drawn, as shown in thr following lines of code:

      1. //Initialize the Canvas  
      2. SKSurface vSurface = args.Surface;  
      3. SKCanvas vCanvas = vSurface.Canvas;  
      4. //Clear the Canvas  
      5. vCanvas.Clear();  
    1. The SKSurface is the layer that directs drawing commands from SkiaSharp onto the underlying native drawing area and SKCanvas is the layer that translates the drawing commands such as DrawRect and DrawPath into the appropriate commands for drawing on the current surface.

    2. The next main item needed for drawing is SKPaint which is used to set the Color of the figure to be drawn, Fontsize (if text is to be written) and other properties needed for beautification of the graphic. In our method this is the main SKPaint object which is used to draw,
      1. //Creating the Paint object to color the Items  
      2. SKPaint vBlackPaint = new SKPaint {  
      3.     Color = SKColors.Black,  
      4.         StrokeWidth = 5,  
      5.         StrokeCap = SKStrokeCap.Round,  
      6.         TextSize = 60  
      7. };  
    1. Then, we have used the common methods like DrawRect, DrawLine, DrawTextfor drawing the the Kundali image as shown in the beginning of the blog. The units used here are device independent units which are managed by Xamarin & SkiaSharp according to the screen resolution of the device.

    This is how the output of the above code looks in Android Emulator.

    Xamarin

    The sample code given in this article is published on GitHub. This article has just touched the surface of using SkiaSharp library to create a simple Kundali structure. You can experiment more with it by going through the Xamarin.Forms SkiaSharp Documentation. Let me know if I have missed anything or if you need further examples or explanation.


    Similar Articles