Question

我在我的程序中实现了FreeType，我可以使用颜色和样式（粗体，斜体，下划线）绘制文本。

现在我想对我的文字进行轮廓效果。我该怎么办？

Effect like that http://freetype-gl.googlecode.com/svn/wiki/images/cartoon.png

我曾尝试两次绘制文字，一个在背景中为黑色，另一个在前景为白色，结果是错误的。
我曾尝试两次绘制文本，一个是粗体，另一个是前景，第二个结果是错误的。

我想再次进行测试：在“大纲”模式下绘制“背景”文本，在常规模式下绘制前景文本。你觉得怎么样？

http://freetype-gl.googlecode.com/svn/wiki/images/outline.png

Answer 1

使用2次传递渲染文本是关键，但您必须正确定位文本。首先，你应该渲染整个轮廓，然后在它上面渲染文本。

渲染大纲：

// initialize stroker, so you can create outline font
FT_Stroker stroker;
FT_Stroker_New(library, &stroker);
//  2 * 64 result in 2px outline
FT_Stroker_Set(stroker, 2 * 64, FT_STROKER_LINECAP_ROUND, FT_STROKER_LINEJOIN_ROUND, 0);
...
// generation of an outline for single glyph:
FT_UInt glyphIndex = FT_Get_Char_Index(face, glyphId);
FT_Load_Glyph(face, glyphIndex, FT_LOAD_DEFAULT);
FT_Glyph glyph;
FT_Get_Glyph(face->glyph, &glyph);
FT_Glyph_StrokeBorder(&glyph, stroker, false, true);
FT_Glyph_To_Bitmap(&glyph, FT_RENDER_MODE_NORMAL, nullptr, true);
FT_BitmapGlyph bitmapGlyph = reinterpret_cast<FT_BitmapGlyph>(glyph);
// blit the glyph here on your target surface.
// For positioning use bitmapGlyph->left, bitmapGlyph->top
// For iteration over the glyph data use bitmapGlyph->bitmap.buffer, bitmapGlyph->bitmap.width, bitmapGlyph->bitmap.rows, bitmapGlyph->bitmap.pitch.

接下来，您必须使用与大纲相同的数据呈现文本本身。使用上面的代码，但删除FT_Glyph_StrokeBorder(&glyph, stroker, false, true);行。这样，您就可以将文本放在大纲的顶部。

实现这一目标＆＃34;卡通＆＃34;文字效果你必须做4遍：3个轮廓+ 1个文字。纹理化或应用渐变应该在blitting阶段完成。

Answer 2

绘制文本，然后对未完全着色的每个像素进行第二遍。对于每个像素，计算距离最近的彩色像素有多远。如果它小于X，其中X是轮廓的所需宽度，请使用轮廓颜色对其进行着色。

对于大文本执行此操作可能会很慢，但可以对其进行优化并缓存结果以使其运行速度可接受。此方法允许完全自由地处理各种轮廓和阴影效果。

使用Freetype绘制文本大纲

2 个答案: