How to Use SkiaSharp in Tizen .NET
Rina You
Staff Engineer
SkiaSharp is a cross-platform 2D graphics API for .NET platforms powered by the Google Skia Library. SkiaSharp provides a comprehensive API that is used on mobile, TV, watch, and desktop platforms. You can use SkiaSharp to create many different types of graphics, tables, and text in your own application.
For more information about SkiaSharp APIs, see the SkiaSharp API guide.
This blog introduces SkiaSharp use in Tizen .NET.
Create a Tizen .NET application
Create a Tizen .NET UI application. If you are not familiar with the Tizen .NET application, see Quick Guides for further information.
In this blog, we share example code using ElmSharp. The sample application references the TizenFX package, which contains ElmSharp.
Change the target framework
Change the TargetFramework of the UI application project file (.csproj) using SkiaSharp in Tizen .NET.
As is
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFramework>netcoreapp2.0</TargetFramework>
</PropertyGroup>
New
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFramework>tizen40</TargetFramework>
</PropertyGroup>
Note: This example is based on Tizen 4.0. If your application is based on Tizen 5.0, change TargetFramework to tizen50 instead of tizen40.
Install the NuGet packages for SkiaSharp
- In Solution Explorer, right-click on the project name of your UI application and click Manage NuGet Packages.
- Select the Browse tab
- Choose nuget.org as the Package source, and search for SkiaSharp and SkiaSharp.Views.
- Select these packages in the list, and click Install.
Draw the text
Create the SKCanvasView and use SkiaSharp drawing commands to draw simple text.
- Add
PaintSurfaceEvent Handler ofSKCanvasView. - Implement the following example code inside
PaintSurfaceevent handler to draw text using SKCanvas'sDrawTextmethod:
using Tizen.Applications;
using ElmSharp;
using SkiaSharp;
using SkiaSharp.Views.Tizen;
namespace SkiaSharpTizen
{
class App : CoreUIApplication
{
protected override void OnCreate()
{
base.OnCreate();
Window window = new Window("ElmSharpApp")
{
AvailableRotations = DisplayRotation.Degree_0 | DisplayRotation.Degree_180
| DisplayRotation.Degree_270 | DisplayRotation.Degree_90
};
window.BackButtonPressed += (s, e) =>
{
Exit();
};
window.Show();
var skiaView = new SKCanvasView(window);
skiaView.PaintSurface += OnPaintSurface;
skiaView.Show();
var conformant = new Conformant(window);
conformant.Show();
conformant.SetContent(skiaView);
}
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
var skiaView = sender as SKCanvasView;
var canvas = e.Surface.Canvas;
var scale = (float)ScalingInfo.ScalingFactor;
var scaledSize = new SKSize(e.Info.Width / scale, e.Info.Height / scale);
canvas.Scale(scale);
canvas.Clear(SKColors.Yellow);
var paint = new SKPaint
{
Color = SKColors.Black,
IsAntialias = true,
Style = SKPaintStyle.Fill,
TextAlign = SKTextAlign.Center,
TextSize = 20
};
var coord = new SKPoint(scaledSize.Width / 2, (scaledSize.Height + paint.TextSize) / 2);
canvas.DrawText("SkiaSharp in Tizen", coord, paint);
}
static void Main(string[] args)
{
Elementary.Initialize();
Elementary.ThemeOverlay();
App app = new App();
app.Run(args);
}
}
}
- Build the application project, install, and run this application.
Draw the star polygon
To draw a star polygon, add the SKCanvasView PaintSurface event handler. Then use the following example code to draw a star polygon:
private void OnDrawSample(SKCanvas canvas, int width, int height)
{
var size = ((float)height > width ? width : height) * 0.75f;
var R = 0.45f * size;
var TAU = 6.2831853f;
using (var path = new SKPath())
{
path.MoveTo(R, 0.0f);
for (int i = 1; i < 7; ++i)
{
var theta = 3f * i * TAU / 7f;
path.LineTo(R * (float)Math.Cos(theta), R * (float)Math.Sin(theta));
}
path.Close();
using (var paint = new SKPaint())
{
paint.IsAntialias = true;
canvas.Clear(SKColors.LightBlue);
canvas.Translate(width / 2f, height / 2f);
canvas.DrawPath(path, paint);
}
}
}
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
OnDrawSample(e.Surface.Canvas, e.Info.Width, e.Info.Height);
}
For more information, see the SkiaSharp2DSample on GitHub.
If you have any questions about using SkiaSharp in Tizen .NET, use Issues to contact us.
