Color fill inside font boundary

Davide_Pagano · December 15, 2016, 6:32am

Hi,

how would you color “inside” a text font in a canvas? Just to clarify, if we consider the “O”, I’d like to color just inside the oval. Now, in case of the “O” this is quite easy but it’s much more complicated in general to do it by hand. Any suggestions?

[In my case the text is made of symbols and I want to color inside them to improve the visibility when placed on the background picture]

Thanks.

Ulrich_Bogun · December 15, 2016, 10:00am

As an alternative proposal:
An old trick when layout apps did not have shadows was to write the text twice in two contrasting colors with a small offset: Like first a black version and then again in white, but with an x/y offset of 1 or 2.
Or, if you are only targeting macOS, use declares, plugins or libraries to use the setShadow of CGContext (aka Graphics) and write the string automatically shadowed.

Will_Shank · December 15, 2016, 10:00am

Here’s some rough code that may help. First it works on building a mask to draw the inside color. Starting with a solid white picture the text is drawn in solid black. Then a map is applied to get rid of the anti-aliased frill so only the deepest, solid text pixels are left. Then the outside is flood-filled with a specific grey value. Now you have grey on the outside, black text, and white inside the text. A final map is applied that makes that outside grey into white and everything else solid black. This is the final mask. Fill a picture with your color of choice and apply that mask. Draw the colored/masked picture to your destination and draw the regular text over it.

[code] Sub Action()

//draw text solid black
dim p As new picture(300, 200, 32)
p.Graphics.TextFont = “Arial”
p.Graphics.TextSize = 40
p.Graphics.ForeColor = &c000000
p.Graphics.DrawString “ApplaumB”, 20, 100

//cut out anti-aliased pixels
dim map(255) As integer
map(0) = 0
for i As integer = 1 to 255
map(i) = 255
next
p.RGBSurface.Transform( map )

//fill outside in grey
p.RGBSurface.FloodFill(0, 0, &c808080)

//map that outside grey to white and everything else black
dim map2(255) As integer
map2(128) = 255
p.RGBSurface.Transform( map2 )

//create new picture filled with the Inner Color and apply mask
dim p2 As new Picture(300, 200, 32)
p2.Graphics.ForeColor = &cDDAA44
p2.Graphics.FillRect 0, 0, p2.Width, p2.Height
p2.ApplyMask( p )

//with properly masked color pic can draw final result
dim p3 As new Picture(300, 200)
p3.Graphics.DrawPicture p2, 0, 0
p3.Graphics.TextFont = “Arial”
p3.Graphics.TextSize = 40
p3.Graphics.ForeColor = &c000000
p3.Graphics.DrawString “ApplaumB”, 20, 100

//show it in a Canvas
Canvas1.Backdrop = p3

End Sub
[/code]

Will_Shank · December 15, 2016, 10:23am

I’m not sure this will improve readability though. It might be better to just fill a semi-transparent rounded rectangle that text is drawn on.

Davide_Pagano · December 15, 2016, 11:24am

[quote=303552:@Will Shank]Here’s some rough code that may help. First it works on building a mask to draw the inside color. Starting with a solid white picture the text is drawn in solid black. Then a map is applied to get rid of the anti-aliased frill so only the deepest, solid text pixels are left. Then the outside is flood-filled with a specific grey value. Now you have grey on the outside, black text, and white inside the text. A final map is applied that makes that outside grey into white and everything else solid black. This is the final mask. Fill a picture with your color of choice and apply that mask. Draw the colored/masked picture to your destination and draw the regular text over it.