Getting Started With SkiaSharp

Requirements

  • Visual Studio Code (VS Code)
  • Polyglot Notebook Extension
    • Create New File
  • A little bit of experience in C#

Quick Setup

This guide will walk you through the basic setup and usage of SkiaSharp in VS Code.

Step 1: Create a Notebook File

  1. Open VS Code.
  2. Create a new file and name it Basic.ipynb or any name with the extension .ipynb or .dib.

Step 2: Install SkiaSharp Library

In the first cell of your notebook, type the following command to download the SkiaSharp library from the NuGet package repository:

1
#r "nuget:SkiaSharp"

Create New File

Step 3: Import SkiaSharp Library

In a different cell, import the SkiaSharp library using the following code:

1
using SkiaSharp;

Create New File

Step 4: Create a Dot Matrix Using SkiaSharp

Now, let’s create a dot matrix using SkiaSharp. Copy and paste the following code into another cell:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
int width = 1200;  
int height = 200;  
int step = 30; 

SKBitmap bmp = new(width, height); 
SKCanvas canvas = new(bmp);
canvas.Clear(SKColor.Parse("#fff")); 

SKPaint paint = new() 
{ 
    Color = SKColors.White.WithAlpha(100), 
    IsAntialias = true,
    StrokeWidth = 3,
    ColorF = SKColor.Parse("#003366")
};  

for (var i = step; i < height; i += step)
{
    for (var j = step; j < width; j += step)
    {
        SKPoint point = new(j, i);
        canvas.DrawPoint(point, paint);
    }   
}

// For saving the image as a file
using (SKFileWStream fs = new("image.jpg"))
{
    bmp.Encode(fs, SKEncodedImageFormat.Jpeg, quality: 50);
}
bmp.Display();

Create New File

Additional Information

For more details on the SKBitmap class and its usage, please refer to the official Microsoft documentation on SKBitmap.

By following these steps, you will have a basic setup for creating graphics with SkiaSharp in a Polyglot Notebook within VS Code. Enjoy exploring the powerful graphics capabilities of SkiaSharp!