2

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?

Vahid
  • 5,144
  • 13
  • 70
  • 146
  • 1
    Pretty easy to see when you zoom in on the bitmaps. The window title uses ClearType anti-aliasing, the default for a company that makes desktop operating systems. The window text is rendered with gray-scale anti-aliasing, the default for a company that makes mobile operating systems. Cats and ugly dogs. [Check this](https://github.com/mono/SkiaSharp/issues/141). – Hans Passant Jan 26 '17 at 17:41
  • Thanks Hans. I'm still trying to find the solution. – Vahid Jan 26 '17 at 21:43

2 Answers2

4

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" />
Matthew
  • 4,832
  • 2
  • 29
  • 55
  • Hi Matthew, thanks for the good news. I downloaded the latest version from git but I cannot build my solution. The type SK3dView cannot be found. – Vahid Jan 26 '17 at 21:41
  • 1
    Rather just download the samples from: https://github.com/mono/SkiaSharp/releases/tag/v1.56.0 The master branch is unstable, use the v1.56.0 tag if you want to build – Matthew Jan 27 '17 at 10:22
  • Thanks Matthew. I will look at them when I'm home. Skia looks really promising. I hope I can get it work. – Vahid Jan 27 '17 at 11:49
  • Do you know if rotated texts are possible or not? http://stackoverflow.com/questions/41908497/draw-rotated-text-in-skiasharp – Vahid Jan 28 '17 at 19:20
  • 1
    I posted an answer, but `canvas.Rotate(x);` and `canvas.DrawText(text);` are correct. You are just adjusting the drawing matrix. – Matthew Jan 28 '17 at 21:31
1

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

Michal Dobrodenka
  • 1,104
  • 8
  • 27