Getting Started With SkiaSharp With Xamarin.Forms

6. 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.
   
   
7. 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();

2. 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.
   
   
3. 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. };

4. 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.



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.