How do I emboss text with a transparent background?

167 views
Skip to first unread message

Matthew Eno

unread,
Jul 15, 2021, 9:49:35 PM7/15/21
to skia-discuss
Firstly, I'm using SkiaSharp, which is a C# derivation of Skia, so hopefully my question is welcome here.

I'm using SkiaSharp to draw text onto a canvas that I've already drawn a background image onto.  It does a canvas.DrawBitmap to add a background, then uses canvas.DrawText to add some text on top of the background, but I now need to apply a 3D embossed effect like the image below:
1ouli.png

It's working fine when just drawing regular text, but I want to add an embossed effect to the text. To do this, I've tried using SKImageFilter.CreateDistantLitDiffuse, which gives the right effect, but the problem is that it fills the background with the light color (also influenced by the diffuse lighting constant). This ends up obliterating my background.

The image below shows the text with the embossed effect, but as you can see, it's background is not transparent. Also, the text should be white, but it's colour has been changed by the filter.
gDxJC.png

The image filter I'm using is:

fontPaint.ImageFilter = SKImageFilter.CreateDistantLitDiffuse( new SKPoint3(2, 3, 4), SKColors.Transparent, -3, (float)0.2) canvas.DrawText(element.Value, coords, fontPaint);

I've seen examples of embossing by drawing the text twice with an offset, but this doesn't give the desired effect.

Any ideas of how I can work-around this issue with the image filter filling in the background?

Reply all
Reply to author
Forward
0 new messages