Tamaño de texto SkiaSharp en formularios Xamarin

skiasharp bitmap

Question

¿Cómo se relaciona la propiedad TextSize en un objeto SKPaint con el tamaño estándar FontFile de Xamarin Forms?

En la imagen, puede ver la diferencia entre el tamaño 40 en una etiqueta y como pintado. ¿Qué debería hacer para que sean del mismo tamaño?

Answer 1

Creo que el problema está en la forma en que Xamarin.Forms maneja los tamaños de fuente. Por ejemplo, en Android, puede definir el tamaño de fuente en píxeles (px), píxeles independientes de escala (sp), pulgadas (pulgadas), milímetros y píxeles independientes de densidad (dp / inmersión).

No recuerdo cómo Xamarin.Forms maneja los tamaños (px, sp o dp) pero la diferencia que ves aquí se debe a eso. Lo que podría hacer es crear un efecto que cambie el manejo del tamaño de fuente en el control nativo e intente hacer coincidir el tamaño proporcionado por SkiaSharp.

Answer 2

Como mencionó @hankide, tiene que ver con el hecho de que el sistema operativo nativo ha escalado los elementos de la interfaz de usuario para que la aplicación "tenga el mismo tamaño" en diferentes dispositivos.

Esto es ideal para botones y todo lo que el sistema operativo está dibujando. Entonces, si el botón es más grande, el sistema operativo simplemente aumenta el tamaño del texto. Sin embargo, con SkiaSharp, no tenemos idea de lo que está dibujando, así que no podemos escalar. Si tuviéramos que escalar, la imagen se volvería borrosa o pixelada en las pantallas de alta resolución.

Una forma de obtener todo del mismo tamaño es hacer una escala global antes de dibujar cualquier cosa:

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

Y esto a menudo es lo suficientemente bueno, pero a veces realmente desea dibujar elementos de manera diferente en una pantalla de alta resolución. Un ejemplo sería un fondo de mosaico. En lugar de estirar la imagen en un lienzo más grande, es posible que desee simplemente colocarlo en mosaico, preservando los píxeles.

En el caso de esta pregunta, puede escalar todo el lienzo antes de dibujar, o simplemente puede escalar el texto:

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

De esta forma, el tamaño del texto aumenta, pero el resto del dibujo se encuentra en un lienzo más grande.

Tengo un ejemplo en GitHub: https://github.com/mattleibow/SkiaSharpXamarinFormsDemo

Esto compara las etiquetas Xamarin.Forms, SkiaSharp y Native. (Todos deben ser exactamente del mismo tamaño)