Click here to Skip to main content
13,254,366 members (56,669 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.4K views
Posted 25 May 2017

Getting Started with SkiaSharp with Xamarin Forms

, 25 May 2017
Rate this:
Please Sign up or sign in to vote.
A couple of months back I wrote about Using OxyPlot with Xamarin Forms, where we created a few graphs to show data, what if a [...]

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

Oxyplot doesn’t support this, but we have another open source .Net library to our rescue 🙂 it’s Skiasharp. It’s the fully cross-platform, rich 2D graphics drawing API powered by Google’s Skia library. This post will be a step by step guide to create an image same as 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 that too.
  2. Right click on the Solution File and select Manage NuGet Packages For Solution… from the context menu, it will open NuGet-Solution window.
  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 SkiaSharp.View.Forms. select it and install it as shown in below image.
  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 SkiaSharp assembly to use in XAML just like any other third party control. Following is the code for MainPage.Xaml of sample application:

    <?xml version="1.0" encoding="utf-8" ?>
    <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">
        <sk:SKCanvasView x:Name="canvasView"
    
                               Grid.Row="1"
    
                               Grid.Column="0"
    
                               Grid.ColumnSpan="2"
    
                               PaintSurface="OnCanvasViewPaintSurface" />
    </ContentPage>
  5. 5. 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.
  6. 6. Following is the code ofstrong>OnCanvasViewPaintSurface method.

        void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
            {
    //Initialize the Canvas
                SKSurface vSurface = args.Surface;
                SKCanvas vCanvas = vSurface.Canvas;
    //Clear the Canvas
                vCanvas.Clear();
    //Creating the Paint object to color the Items 
                SKPaint vBlackPaint = new SKPaint
                {
                    Color = SKColors.Black,
                    StrokeWidth=5,
                    StrokeCap=SKStrokeCap.Round,
                    TextSize = 60             
                };
                SKPaint vWhitePaint = new SKPaint
                {
                    Color = SKColors.White
                };
    
                var vRectangle = new SKRect(100, 100, 900, 900);
                vCanvas.DrawRect(vRectangle,vBlackPaint);
                var vWhiteRectangle = new SKRect(105, 105, 895, 895);
                vCanvas.DrawRect(vWhiteRectangle, vWhitePaint);
    
                //Diagnol Lines
                vCanvas.DrawLine(100, 100, 900, 900, vBlackPaint);
                vCanvas.DrawLine(900, 100, 100, 900, vBlackPaint);
                //Drawing the Numbers between the lines
                vCanvas.DrawText("1", 500, 300, vBlackPaint);
                vCanvas.DrawText("2", 260, 200, vBlackPaint);
                vCanvas.DrawText("3", 150, 350, vBlackPaint);
                vCanvas.DrawText("4", 250, 500, vBlackPaint);
                vCanvas.DrawText("5", 150, 700, vBlackPaint);
                vCanvas.DrawText("6", 260, 800, vBlackPaint);
                vCanvas.DrawText("7", 500, 700, vBlackPaint);
                vCanvas.DrawText("8", 670, 830, vBlackPaint);
                vCanvas.DrawText("9", 780, 700, vBlackPaint);
                vCanvas.DrawText("10", 670, 500, vBlackPaint);
                vCanvas.DrawText("11", 780, 350, vBlackPaint);
                vCanvas.DrawText("12", 670, 200, vBlackPaint);
                //The Side lines for creating other boxes 
                vCanvas.DrawLine(100, 500, 500, 100, vBlackPaint);
                vCanvas.DrawLine(100, 500, 500, 900, vBlackPaint);
                vCanvas.DrawLine(500, 100, 900, 500, vBlackPaint);
                vCanvas.DrawLine(500, 900, 900, 500, vBlackPaint);
            }
  7. 7. OnCanvasViewPaintSurface Method Explained:

    1. In the above code first we are initializing the Canvas by pulling the objects from SKPaintSurfaceEventArgs of the method and then clearing it so that whenever this event is executed a fresh graphic is drawn. as shown in following three lines of code:

      //Initialize the Canvas
                  SKSurface vSurface = args.Surface;
                  SKCanvas vCanvas = vSurface.Canvas;
      //Clear the Canvas
                  vCanvas.Clear();

      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:

      //Creating the Paint object to color the Items 
                  SKPaint vBlackPaint = new SKPaint
                  {
                      Color = SKColors.Black,
                      StrokeWidth=5,
                      StrokeCap=SKStrokeCap.Round,
                      TextSize = 60             
                  };
    3. Then we have used the common methods like DrawRect, DrawLine, DrawText for 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 above code looks in Android Emulator:

The sample code given in this article are published on Github. This article has just touched the surface of using SkiaSharp library to create 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 need any other example.

🙂 🙂 🙂 🙂 Happy Coding 🙂 🙂 🙂 🙂

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S Ravi-Kumar-2012
Architect
India India
Hi There, I am an IT professional with 14 years of experience in architecting, designing and building IT solutions for complex business needs in form of mobile & web applications using Microsoft technologies. Currently working in an multinational company in India as Solutions Architect. The articles here are sourced from my blog : http://err2solution.com/

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 25 May 2017
Article Copyright 2017 by S Ravi-Kumar-2012
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid