CODEWITHSUNDEEP
c#wpfskiaskiasharp
Vahid
Vahid

Reputation: 5444

Blurry text with SkiaSharp in WPF

I`m using the SkiaSharp to draw text in WPF.

http://lostindetails.com/blog/post/SkiaSharp-with-Wpf

https://github.com/8/SkiaSharp-Wpf-Example

As you can see the text is not sharp.

enter image description here

You can easily notice that by comparing the text with the MainWindow test in the title which is sharp.

What can be the problem?

Upvotes: 2

Views: 3216

Answers (2)

Michal Dobrodenka
Michal Dobrodenka

Reputation: 1144

From my experience If you really want nice and sharp text in WPF, you have to use Text shaping via SkiaSharp.HarfBuzz - which position letters with subpixel precision and then use canvas.DrawPositionedText().

Upvotes: 1

Matthew
Matthew

Reputation: 5222

The chances are it is that you are not rendering at a high enough resolution. I experience this on my SurfaceBook display, but not on my external display. You actually have to create a "larger" surface than you actually need. For example, my SurfaceBook has a scaling of 300%, so I have to first get the width of the window, and then multiply by 3:

https://github.com/mono/SkiaSharp/blob/master/source/SkiaSharp.Views/SkiaSharp.Views.WPF/SKElement.cs#L57-L61

var m = PresentationSource.FromVisual(this).CompositionTarget.TransformToDevice;
var dpiX = m.M11;
var dpiY = m.M22;
var width = (int)(ActualWidth * dpiX);
var height = (int)(ActualHeight * dpiY);

Instead of having to do this yourself, you can make use of the pre-created views in the NuGet: https://www.nuget.org/packages/SkiaSharp.Views

You can then just drop in the SKElement as in this sample:

https://github.com/mono/SkiaSharp/blob/master/samples/WPFSample/WPFSample/MainWindow.xaml#L28

<views:SKElement x:Name="canvas" PaintSurface="OnPaintCanvas" />

Upvotes: 4

Related Questions