![\"SkiaSharp\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/skia_512x512.png\")
SkiaSharp is a fully cross-platform, rich 2D graphics drawing API powered by Google’s Skia library<\/a>, the same library that drives Google Chrome, Mozilla Firefox, and Android’s graphics stack. Not only is SkiaSharp powerful, is’s also very simple to use\u2014all you need to do is install the SkiaSharp NuGet<\/a>.<\/p>\nSkiaSharp can be used to render images on many platforms, including iOS, macOS, tvOS, Android, and Universal Windows Platform (UWP). Not only does SkiaSharp support native mobile apps, it also supports .NET Standard 1.3 and .NET Core on macOS and Windows, as well as Classic Windows Desktop and WPF applications.<\/p>\n
Installing SkiaSharp<\/h3>\n
Today, we’re going to look at creating a simple mobile app that demonstrates a few of the many SkiaSharp features. The source code for this app can be found on GitHub: mattleibow\/SkiaSharpDemo<\/a>. <\/p>\n We’re going to use XAML with Xamarin.Forms<\/a> to create our app, but we could use any of the native Xamarin or Windows platforms. The app we create will draw shapes, paths, and text on the screen:<\/p>\n To get started, let’s create a new Xamarin.Forms app in Xamarin Studio or Visual Studio. Once the app is created, install the SkiaSharp<\/a> NuGet and the SkiaSharp.Views.Forms<\/a> NuGet in all of the the projects. <\/p>\n The SkiaSharp NuGet contains the native rendering engine for all the platforms, but this is just for in-memory rendering. To display the rendered images on the screen, we can make use of the various views in the SkiaSharp.Views.Forms NuGet. <\/p>\n If we we weren’t using Xamarin.Forms, but rather going native, we would instead install the SkiaSharp.Views<\/a> NuGet. This package contains views for all the platforms supported by SkiaSharp.<\/em><\/p>\n Once the NuGets are installed, we can add the SkiaSharp view to the XAML. Here, we’re adding a Then we add the event handler in the code-behind for the page:<\/p>\n Note: If we run our app now, we’ll see a plain screen and perhaps some artifacts or strange pixels. This is because we are not drawing anything yet, just rendering what was in memory last, which is random data.<\/em><\/p>\n Now that we have the views in place, we can write the drawing code for the view. Drawing in SkiaSharp takes the form of three basic steps:<\/p>\n When we use the SkiaSharp views, the first step (getting a surface) is done for us automatically, and we can simply query the surface for a canvas. The three main components are the The The next component is the Finally, the In our When we run this code, we’ll see a white screen, which we can start drawing shapes on:<\/p>\n The first thing we’ll draw is a simple circle using the We can see the circle on the screen when we run our app now:<\/p>\n We can also draw more complex shapes using a Now we’ll see an X next to the circle we drew previously when we run the app:<\/p>\n The last thing we’ll look at here is text. It’s just as easy to draw text using SkiaSharp; all we need to do is use the We’ll now see orange text below our shapes and paths that were drawn earlier:<\/p>\n Getting off the ground with SkiaSharp is easy\u2014all you need is one NuGet: SkiaSharp<\/a>. This package provides everything necessary to create and manipulate drawings on any platform.<\/p>\n If you’re looking to display your drawings on-screen, you can check out the SkiaSharp.Views<\/a> NuGet package. This package has a set of views, layers, and controls that get you going with displaying your drawing on-screen. If you have a Xamarin.Forms app, then you can install the SkiaSharp.Views.Forms<\/a> NuGet package, which provides the same views for Xamarin.Forms.<\/p>\n Finally, we have a lightweight SVG loading library that can be used to load an SVG into a We’ve documented all of the APIs of SkiaSharp on the Xamarin developer site<\/a>, along with the developer guides<\/a>, which provide even more information.<\/p>\n You can also ask questions on the Xamarin SkiaSharp forums<\/a>. If you prefer StackOverflow, we’re there, too<\/a>!<\/p>\n Hang out on Gitter to ask questions and add comments – here: xamarin\/XamarinComponents<\/a>.<\/p>\n The SkiaSharp codebase is constantly growing and improving. If you want to contribute, you can do so by forking on GitHub: mono\/SkiaSharp<\/a>.<\/p>\n![\"Final](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/circle-cross-text-cropped.png\")
<\/p>\nAdding SkiaSharp Views<\/h3>\n
SKCanvasView<\/code><\/a>, the CPU-based drawing surface, but we could also use the SKGLView<\/code><\/a>, the GPU-based drawing surface:<\/p>\n\n
<ContentPage ... xmlns:views=\"clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms\">\n <Grid>\n <views:SKCanvasView PaintSurface=\"OnPainting\" \/>\n <\/Grid>\n<\/ContentPage><\/code>\n<\/pre>\n\n
using SkiaSharp;\nusing SkiaSharp.Views.Forms;\n\nprivate void OnPainting(object sender, SKPaintSurfaceEventArgs e)\n{\n \/\/ we will draw here\n}<\/code>\n<\/pre>\nDrawing with SkiaSharp<\/h2>\n
\n
SKSurface<\/code>, the SKCanvas<\/code>, and the SKPaint<\/code>.<\/p>\nSKSurface<\/code><\/a> is the layer that directs drawing commands from SkiaSharp onto the underlying native drawing area. This area could be a memory location for software drawing, a framebuffer ID for an OpenGL framebuffer object, or a texture object. There are several ways to create this surface, either by creating a new surface or by using an existing memory location or framebuffer object. More information can be found by looking at the SKSurface.Create(...)<\/code> APIs.<\/p>\nSKCanvas<\/code><\/a>. This is the layer that translates your drawing commands, such as DrawRect<\/code> and DrawPath<\/code>, into the appropriate commands for drawing on the current surface. Typically, you obtain the canvas from a surface directly using the SKSurface.Canvas<\/code> property. The canvas has numerous methods, from drawing shapes (DrawRect<\/code>, DrawOval<\/code>, and DrawPath<\/code>) to text (DrawText<\/code>) and images (DrawBitmap<\/code> and DrawBitmapLattice<\/code>) to manipulating the drawing matrix and clipping (RotateDegrees<\/code>, Skew<\/code>, and ClipRect<\/code>).<\/p>\nSKPaint<\/code><\/a> type is where you control what the drawing looks like. You can call the DrawRect<\/code> method multiple times and by only changing the paint, the rectangle will look totally different. Some of the properties of SKPaint<\/code> directly control the way things appear (IsAntialias<\/code>, Color<\/code>, Style<\/code>, and StrokeWidth<\/code>), some control how text is drawn (Typeface<\/code>, UnderlineText<\/code>, TextSize<\/code>, and TextAlign<\/code>), plus there are the shaders, mask filters, color filters, image filters, and blend modes.<\/p>\nClearing the Canvas<\/h3>\n
OnPainting<\/code> method, we first need to get the canvas for drawing, and then we can prepare the canvas by clearing it and painting it a nice white:<\/p>\n\n
private void OnPainting(object sender, SKPaintSurfaceEventArgs e)\n{\n \/\/ we get the current surface from the event args\n var surface = e.Surface;\n \/\/ then we get the canvas that we can draw on\n var canvas = surface.Canvas;\n \/\/ clear the canvas \/ view\n canvas.Clear(SKColors.White);\n}<\/code>\n<\/pre>\n![\"Final](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/white-cropped.png\")
<\/p>\nDrawing Shapes<\/h3>\n
SKCanvas.DrawCircle(cx, cy, radius, paint)<\/code><\/a> method. As you can see, this method has an SKPaint<\/code> parameter, which we’ll use to draw a filled circle with a border:<\/p>\n\n
\/\/ create the paint for the filled circle\nvar circleFill = new SKPaint {\n IsAntialias = true,\n Style = SKPaintStyle.Fill,\n Color = SKColors.Blue\n};\n\n\/\/ draw the circle fill\ncanvas.DrawCircle(100, 100, 40, circleFill);\n\n\/\/ create the paint for the circle border\nvar circleBorder = new SKPaint {\n IsAntialias = true,\n Style = SKPaintStyle.Stroke,\n Color = SKColors.Red,\n StrokeWidth = 5\n};\n\n\/\/ draw the circle border\ncanvas.DrawCircle(100, 100, 40, circleBorder);<\/code>\n<\/pre>\n![\"Final](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/circle-cropped.png\")
<\/p>\nDrawing Paths<\/h3>\n
SKPath<\/code><\/a> and the SKCanvas.DrawPath(path, paint)<\/code><\/a> method:<\/p>\n\n
\/\/ create the paint for the path\nvar pathStroke = new SKPaint {\n IsAntialias = true,\n Style = SKPaintStyle.Stroke,\n Color = SKColors.Green,\n StrokeWidth = 5\n};\n\n\/\/ create a path\nvar path = new SKPath();\npath.MoveTo(160, 60);\npath.LineTo(240, 140);\npath.MoveTo(240, 60);\npath.LineTo(160, 140);\n\n\/\/ draw the path\ncanvas.DrawPath(path, pathStroke);<\/code>\n<\/pre>\n![\"Final](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/circle-cross-cropped.png\")
<\/p>\nDrawing Text<\/h3>\n
SKCanvas.DrawText(text, x, y, paint)<\/code><\/a> method:<\/p>\n\n
\/\/ create the paint for the text\nvar textPaint = new SKPaint\n{\n IsAntialias = true,\n Style = SKPaintStyle.Fill,\n Color = SKColors.Orange,\n TextSize = 80\n};\n\n\/\/ draw the text (from the baseline)\ncanvas.DrawText(\"SkiaSharp\", 60, 160 + 80, textPaint);<\/code>\n<\/pre>\n<\/p>\nOverview<\/h2>\n
SKPicture<\/code><\/a>: SkiaSharp.Svg<\/a>.<\/p>\nDocumentation and Forums<\/h2>\n
Code, Issues and Suggestions<\/h2>\n