Search code examples
skiasharp

Drop-Shadow or Edge on Text Using SkiaSharp

I'm trying to figure out how to get text, created with SkiaSharp, to look like this:

enter image description here

Particularly, the black edge of the text (which seems to be on the left side). This screen shot is from a Java desktop app which we are porting to Android, using Xamarin. The number 614 does not look as good without the black edge.

I'm aware of this answer https://stackoverflow.com/a/40428587/540156 , but it doesn't give me enough. I've been using all manner of properties on the SkPaint object. But I cannot figure it out.

Is it a matter of drawing the text again, just a little to the left? I've tried that, and it doesn't look good.

Thanks

Solution

  • enter image description here

    I know that image is not perfect, but it is close enough (hopefully). You may have to use hinting or something to get a beautiful text.

    The chances are you are using a font that is designed for small characters, my fancy fonts that only look good at 12 points probably won't cut it.

    canvas.Clear(new SKColor(19, 139, 4));

var paint = new SKPaint
{
    Color = SKColors.Black,
    IsAntialias = true,
    Style = SKPaintStyle.Fill,
    TextAlign = SKTextAlign.Center,
    TextSize = 11,
    Typeface = SKTypeface.FromFamilyName("Terminal", SKTypefaceStyle.Bold)
};
var coord = new SKPoint(info.Width / 2, (info.Height + paint.TextSize) / 2);
canvas.DrawText("614", coord, paint);

paint.Color = new SKColor(0, 255, 0);
coord.Offset(1, -1);
canvas.DrawText("614", coord, paint);