使用Freetype绘制文本大纲

使用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);行.这样,您将在大纲顶部显示文本.

要实现这种"卡通"文字效果,您必须完成4次传递:3个轮廓+ 1个文本.在blitting阶段应该进行纹理化或应用渐变.