Нарисуйте текстовый контур с Freetype
Я реализовал FreeType в своей программе, я могу рисовать текст с помощью цветов и стилей (полужирный, курсив, подчеркивание).
Теперь я хотел бы сделать эффект контура на моем тексте. Как мне это сделать?
Такой эффект http://freetype-gl.googlecode.com/svn/wiki/images/cartoon.png
- Я попытался нарисовать текст два раза, один на черном фоне, второй на белом, результат был неверным.
- Я пытался нарисовать текст два раза, один жирным шрифтом, а второй — другим на переднем плане, и здесь результат оказался неверным.
Я хотел бы сделать тест снова: нарисуйте текст «фон» в режиме «контур» и текст переднего плана в обычном режиме. Что вы думаете об этом?
http://freetype-gl.googlecode.com/svn/wiki/images/outline.png
Решение
Рендеринг текста с 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 текст. Текстурирование или применение градиента должно быть сделано во время фазы блиттинга.
Другие решения
Нарисуйте текст, затем сделайте второй проход по каждому пикселю, который не был полностью закрашен. Для каждого из этих пикселей рассчитайте, как далеко он находится от ближайшего цветного пикселя. Если оно меньше X, где X — желаемая ширина вашего контура, раскрасьте его, используя цвет контура.
Это может быть медленно для большого текста, но это может быть оптимизировано, и результаты кэшируются, чтобы сделать его приемлемо быстрым. Этот метод предоставляет полную свободу для всех видов эффектов контура и тени.