CODEWITHSUNDEEP
xamarinxamarin.formsskiasharp
Martynnw
Martynnw

Reputation: 10905

SkiaSharp Text Size on Xamarin Forms

Text Size Comparison

How does the TextSize property on an SKPaint object relate to the 'standard' Xamarin Forms FontSize?

In the image you can see the difference between size 40 on a label and as painted. What would I need to do to make them the same size?

Upvotes: 3

Views: 4875

Answers (2)

Matthew
Matthew

Reputation: 5222

As @hankide mentioned, it has to do with the fact that the native OS has scaling for UI elements so the app "looks the same size" on different devices.

This is great for buttons and all that as the OS is drawing them. So if the button is bigger, the OS just scales up the text. However, with SkiaSharp, we have no idea what you are drawing so we can't do any scaling. If we were to scale, the image would become blurry or pixelated on the high resolution screens.

One way to get everything the same size is to do a global scale before drawing anything:

var scale = canvasWidth / viewWidth;
canvas.Scale(scale);

And this is often good enough, but sometimes you really want to draw items differently on a high resolution screen. An example would be a tiled background. Instead of stretching the image on a bigger canvas, you may want to just tile it - preserving the pixels.

In the case of this question, you can either scale the entire canvas before drawing, or you can just scale the text:

var paint = new SKPaint {
    TextSize = 40 * scale
};

This way, the text size is increased, but the rest of the drawing is on a larger canvas.

I have an example on GitHub: https://github.com/mattleibow/SkiaSharpXamarinFormsDemo

This compares Xamarin.Forms, SkiaSharp and Native labels. (They should all be exactly the same size)

Upvotes: 8

Timo Salomäki
Timo Salomäki

Reputation: 7189

I think that the problem is in the way Xamarin.Forms handles font sizes. For example on Android, you could define the font size in pixels (px), scale-independent pixels (sp), inches (in), millimeters and density-independent pixels (dp/dip).

I can't remember how Xamarin.Forms handles the sizes (px,sp or dp) but the difference you see here is because of that. What you could do, is create an Effect that changes the font size handling on the native control and try to match the sizing provided by SkiaSharp.

Upvotes: 0

Related Questions