Another idea is simpler: a convenient and easy-to-use method for achieving text stroke effects

Copyright: November 2012

When we need to display text on a color-rich image, text cannot be clearly displayed due to the variation of the background color. Just like many early movies that use pure white subtitles, subtitles are often invisible in blue sky and white clouds. At this time, we need a text stroke to highlight the text effect, just like this.

(Animation by Wong Shao voon)

So how to achieve this effect? Below I will give a rough introduction to several common methods. Finally, I will introduce a simple and practical implementation method.

General Method

First Thought: text is an image

1. Convert textblock to writeablebitmap
2. Cycle the pixels of writeablebitmap to determine that the value of each pixel eventually achieves the stroke effect.

Refer to Silverlight font stroke

Byoy's comment:

This approach converts text into images and determines each pixel in the image, which is inefficient and the final result is simple, as shown in.

Second approach: pixel coloring Device

The basic idea of this method is: Assuming that only the pixel coloring device will be applied to textblock, textblock is a rectangle, and the Alpha component of the pixel where the text is located must be greater than 0, otherwise it must be a transparent pixel. If the top, bottom, left, and right pixels of the current pixel are not transparent, This pixel needs to be stroke; otherwise, the text color will be output. Because we need to know the adjacent pixels, we also need to pass in the actualwidth and actualheight of textblock. In this way, the x + 1/width at the current position is the coordinates of adjacent pixels, And the tex2d function can be used to extract its color value. You also need to enter the stroke color and text color.

Refer to Silverlight pixel coloring tool Concise Guide for text stroke effects

Byoy's comment:

It is still a "Cannon hitting mosquitoes" idea, and the text is processed pixel by pixel. The only difference from IDEA 1 is that with the pixel shader, some work is handed over to the GPU, and "looks" very efficient and fast. But what if hardware acceleration is disabled? It becomes the same as 1. The following figure shows the effect of the method.

Third idea: GDI + path drawing

This method is no longer processed by pixel. The basic idea is to add the text string to the drawing path (graphicspath) of GDI + and then drawpath (). Using different brushes, this method can "Draw" a very gorgeous stroke effect, just like this.

Byoy's comment:

This is the best way to scale. Because of the advanced features of GDI +, you can use different brushes such as texture, gradient, and multiple plotting methods to make very exquisite stroke and shadow effects. The only pity is that the amount of code is large (much less than the first two ).

Refer to the Article C # watermark image + TEXT stroke + luminous text. View charts and demos

For more information about the advanced design of this method, see outline text (the award for the Code project "best C ++/mfc article of SEP 2009 ).

 

Simple Method of byoy

It's time for byoy to be lazy.

After reading the previous design ideas, do you feel confused? Or are you dazzled? Is this the only way to achieve this? Do I have to perform a "stroke" if I need a "stroke" text?

In fact, it is completely unnecessary. I used to introduce a simple method to achieve the highlight effect by repeatedly drawing text when I was in the cottage Safari (see step-by-step control: tabcontrol -- Starting from making a fake safari form).

As shown in. When the underlying text is 1 px different from the top-level text, different shadow/highlights are displayed. If we expand this idea and combine the deviations from the top, bottom, left, and right directions, it will be as effective as the final display, the "stroke" text is displayed.

Next we will implement it in GDI +.

// Code by conmajia // txtpoint is the position point for drawing text. offset (-1, 0); // draw the left background text E. graphics. drawstring (this. text, this. font, backbrush, txtpoint); txtpoint. offset (2, 0); // draw the right background text E. graphics. drawstring (this. text, this. font, backbrush, txtpoint); txtpoint. offset (-1,-1); // draws the background text E. graphics. drawstring (this. text, this. font, backbrush, txtpoint); txtpoint. offset (0, 2); // draw the background text E. graphics. drawstring (this. text, this. font, backbrush, txtpoint); txtpoint. offset (0,-1); // position point normalization // draw foreground text E. graphics. drawstring (this. text, this. font, forebrush, txtpoint );

See the following

 

Conclusion

In many cases, we may encounter problems that do not necessarily need to be followed. Just like this time, we need to draw edges. But who said, we have to draw edges? We only need results, not processes. Therefore, we need to jump out of the imprisonment of the problem appearance to gain a broader vision.

Copyright: November 2012

(Full text)