Используем FreeType для вывода строки

Продолжаем наши посиделки с библиотекой растеризации шрифтов FreeType. Из предыдущих моих постов вы уже должны знать какими способами можно выводить текст в OpenGL и как получить изображение символа из шрифта с помощью FreeType.

Наша задача вывести строку каким-нибудь шрифтом в прямоугольную картинку. Для этого у нас есть библиотека FreeType и мы умеем получать с помощью неё изображение символа. Изображения символа для составления строки недостаточно, потому что строка состоит из символов разделенных разным расстоянием, при этом каждый символ имеет разную высоту и позицию по вертикали.

По вертикали у строки есть три основных параметра:

  • базовая линия (baseline) — это ноль по вертикали в нашей системе координат. Символы позиционируются по вертикали относительно этой линии
  • верхняя граница (ascender) — это верхняя горизонтальная линия, которую (теоретически) не пересекает ни один символ в строке (в нашей системе координат ее вертикальная позиция имеет положительное значение)
  • нижняя граница (descender) — это нижняя горизонтальная линия, которую (теоретически) не пересекает ни один символ в строке (ее вертикальная позиция имеет отрицательное значение)

Для нашей задачи нам достаточно лишь базовой линии.

Sphinx
автор картинки: Max Naylor

По горизонтали строка состоит из символов. У каждого символа есть своё посадочное место, его размер и расстояние до следующего символа. Также надо учитывать кернинг (это специальное расстояние между двумя символами, чтобы текст смотрелся более гармонично).

Библиотека FreeType даёт нам возможность узнать о глифе практически все. Есть три источника информации:

  • FT_Glyph — содержит advance.x (расстояние до следующего символа)
  • FT_BitmapGlyph — содержит left (расстояние от текущей позиции posX до картинки), top (расстояние от базовой линии до верхней линии глифа), bitmap (содержит изображение глифа и его размер)
  • FT_Bitmap — содержит width (ширина изображения глифа), height (высота изображения глифа, поле называется rows), buffer (буфер с изображением)

Для наглядности нарисовал вот такую симпатичную схему:

ascender,descender,baseline,advance.x,width,height,top,left

Оранжевым цветом обозначено содержимое FT_Bitmap.buffer, серым — пространство, занимаемое символом в строке.

Алгоритм решения нашей задачи состоит из двух основных шагов:

  1. вычислить ширину и высоту строки и место для рисования каждого символа в строке
  2. выделить память для картинки и нарисовать каждый символ строки по ранее вычисленным позициям

Перед практической частью хотел бы ещё рассказать вкратце про систему счисления библиотеки FreeType.

Для нецелых чисел в ней используется формат 26.6, где 26 бит хранят целую часть числа, а 6 бит — все остальное. Для получения целой части числа его необходимо сдвинуть вправо на шесть бит. Для того, чтобы не терять дробную часть числа, сложение и вычитание надо производить как есть и лишь непосредственно перед использованием целой части сдвигать на шесть бит. Еще есть формат 16.16 (целая часть 16 бит и дробная часть 16 бит). Чего только не придумают, лишь бы float не использовать.

Используемые заголовки, вспомогательные функции и структуры (тело функций ниже по тексту):

// Подключаем FreeType
#include <freetype2/ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H
 
// Подключаем libpng (http://libpng.sourceforge.net/index.html)
#include <png.h>
 
// Поддержка uint8_t, int32_t и т.д.
#include <stdint.h>
// Поддержка std::string
#include <string>
// Поддержка std::vector
#include <vector>
 
// Получить изображение символа
FT_Glyph getGlyph(FT_Face face, uint32_t charcode);
 
// Получить кернинг между двумя символа
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode);
 
// Сохранить картинку в PNG
void savePNG(uint8_t *image, int32_t width, int32_t height);
 
// Позиция и размер глифа в строке
struct Symbol
{
    // Позиция по горизонтали
    int32_t posX;
    // Позиция по вертикали (от базовой линии)
    int32_t posY;
    // Ширина глифа
    int32_t width;
    // Высота глифа
    int32_t height;
 
    FT_Glyph glyph;
};

Для начала загрузим шрифт из файла arial.ttf:

// Инициализация библиотеки
FT_Library ftLibrary = 0;
FT_Init_FreeType(&ftLibrary);
 
// Загрузка шрифта arial.ttf из текущей папки
FT_Face ftFace = 0;
FT_New_Face(ftLibrary, "arial.ttf", 0, &ftFace);
 
// Установим размер символа для рендеринга
FT_Set_Pixel_Sizes(ftFace, 100, 0);

Затем посчитаем позицию каждого символа и размеры строки:

// Выводимая строка
const std::string exampleString("FreeType it's amazing!");
 
// Набор готовых символов
std::vector<Symbol> symbols;
int32_t left = INT_MAX;
int32_t top = INT_MAX;
int32_t bottom = INT_MIN;
uint32_t prevCharcode = 0;
 
// Позиция текущего символа в формате 26.6
int32_t posX = 0;
 
for (std::size_t i = 0; i < exampleString.size(); ++i)
{
    // Получаем код символа
    const uint32_t charcode = exampleString[i];
 
    // Получаем глиф для этого символа
    FT_Glyph glyph = getGlyph(ftFace, charcode);
 
    if (!glyph)
    {
        // Глифы в шрифте есть не для всех символов
        continue;
    }
 
    if (prevCharcode)
    {
        // Используем кернинг
        posX += getKerning(ftFace, prevCharcode, charcode);
    }
    prevCharcode = charcode;
 
    symbols.push_back(Symbol());
    Symbol &symb = symbols.back();
 
    FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) glyph;
 
    // Вычисляем горизонтальную позицию символа
    symb.posX = (posX >> 6) + bitmapGlyph->left;
 
    // Вычисляем вертикальную позицию символа относительно базовой 
    // линии. Отрицательные значения - сверху, положительные - снизу.
    symb.posY = -bitmapGlyph->top;
 
    // Ширина символа
    symb.width = bitmapGlyph->bitmap.width;
    // Высота символа
    symb.height = bitmapGlyph->bitmap.rows;
 
    // Ссылка на глиф
    symb.glyph = glyph;
 
    // Смещаем позицию текущего символа
    // (glyph->advance имеет формат 16.16, поэтому для приведения 
    // его к формату 26.6 необходимо сдвинуть число на 10 бит враво)
    posX += glyph->advance.x >> 10;
 
    // Вычисляем самую левую позицию
    left = std::min(left, symb.posX);
 
    // Вычисляем самую верхнюю позицию
    top = std::min(top, symb.posY);
 
    // Вычисляем самую нижнюю позицию
    bottom = std::max(bottom, symb.posY + symb.height);
}
 
for (std::size_t i = 0; i < symbols.size(); ++i)
{
    // Смещаем все символы влево, чтобы строка примыкала к левой части
    symbols[i].posX -= left;
}
 
const Symbol &lastSymbol = symbols.back();
 
// Ширина строки (изображения) - это крайняя правая 
// точка последнего символа в строке
const int32_t imageW = lastSymbol.posX + lastSymbol.width;
 
// Высота строки (изображения)
const int32_t imageH = bottom - top;

По полученным размерам заполним нашу картинку:

// Выделяем память для картинки
std::vector<uint8_t> image(imageW * imageH);
 
for (std::size_t i = 0; i < symbols.size(); ++i)
{
    const Symbol &symb = symbols[i];
 
    FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) symb.glyph;
    FT_Bitmap bitmap = bitmapGlyph->bitmap;
 
    for (int32_t srcY = 0; srcY < symb.height; ++srcY)
    {
        // Координата Y в итоговой картинке
        const int32_t dstY = symb.posY + srcY - top;
 
        for (int32_t srcX = 0; srcX < symb.width; ++srcX)
        {
            // Получаем пиксель из изображения символа,
            // (обязательно используйте pitch вместо width)
            const uint8_t c = bitmap.buffer[srcX + srcY * bitmap.pitch];
 
            // Если пиксель полностью прозрачный, то пропускаем его
            if (0 == c)
            {
                continue;
            }
 
            // Приводим множество [0..255] к [0..1] для удобства блендинга
            const float a = c / 255.0f;
 
            // Координата X в итоговой картинке
            const int32_t dstX = symb.posX + srcX;
 
            // Вычислим смещение в итоговой картинке
            uint8_t *dst = image.data() + dstX + dstY * imageW;
 
            // Рисуем этот пиксель в итоговую картинку с блендингом
            dst[0] = uint8_t(a * 255 + (1 - a) * dst[0]);
        }
    }
}

Выведем картинку в какой-нибудь простой формат. Например, PNG:

// Сохраняем изображение в PNG формате с прозрачностью
savePNG(image.data(), imageW, imageH);

В конце программы не забудем освободить всю используемую память:

// Освобождаем памяти для глифов
for (std::size_t i = 0; i < symbols.size(); ++i)
{
    FT_Done_Glyph(symbols[i].glyph);
}
 
// Освобождаем шрифт
FT_Done_Face(ftFace);
ftFace = 0;
 
// Заканчиваем работу с библиотекой
FT_Done_FreeType(ftLibrary);
ftLibrary = 0;

Порадуемся за результат:

freetype

Вспомогательные функции:

FT_Glyph getGlyph(FT_Face face, uint32_t charcode)
{
    // Загрузка глифа в face->glyph с отрисовкой
    FT_Load_Char(face, charcode, FT_LOAD_RENDER);
 
    FT_Glyph glyph = 0;
    // Получаем глиф
    FT_Get_Glyph(face->glyph, &glyph);
    return glyph;
}
 
 
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode)
{
    // Получаем индекс левого символа
    FT_UInt leftIndex = FT_Get_Char_Index(face, leftCharcode);
    // Получаем индекс правого символа
    FT_UInt rightIndex = FT_Get_Char_Index(face, rightCharcode);
 
    // Здесь будет хранится кернинг в формате 26.6
    FT_Vector delta;
    // Получаем кернинг для двух символов
    FT_Get_Kerning(face, leftIndex, rightIndex, FT_KERNING_DEFAULT, &delta);
    return delta.x;
}
 
 
void savePNG(uint8_t *image, int32_t width, int32_t height)
{
    // Файл для сохранения картинки
    FILE *f = fopen("output.png", "wb");
 
    png_structp png_ptr =
        png_create_write_struct(PNG_LIBPNG_VER_STRING, 0, 0, 0);
 
    png_infop info_ptr = png_create_info_struct(png_ptr);
 
    png_init_io(png_ptr, f);
 
    // Изображение в формате RGBA по 8 бит на 
    // канал и по четыре канала на пиксель
    png_set_IHDR(
        png_ptr, 
        info_ptr, 
        width, 
        height, 
        8, 
        PNG_COLOR_TYPE_RGBA, 
        PNG_INTERLACE_NONE, 
        PNG_COMPRESSION_TYPE_BASE, 
        PNG_FILTER_TYPE_BASE);
 
    png_write_info(png_ptr, info_ptr);
 
    // Одна строка в формате RGBA, 4 канала
    std::vector<uint8_t> row(width * 4);
 
    // Сохраняем PNG построчно
    for (int32_t y = 0; y < height; ++y)
    {
        // Преобразуем нашу строку из одноканальной в формат RGBA
        for (int32_t x = 0; x < width; ++x)
        {
            // Цвет одинаковый для всех пикселей 0x202020
            row[x * 4 + 0] = 0x20;
            row[x * 4 + 1] = 0x20;
            row[x * 4 + 2] = 0x20;
            // Прозрачность берём из исходных данных
            row[x * 4 + 3] = image[y * width + x];
        }
 
        // Сохраняем строку в PNG
        png_write_row(png_ptr, row.data());
    }
 
    png_write_end(png_ptr, 0);    
 
    // Закончили работу, освобождаем ресурсы
    fclose(f);
    png_free_data(png_ptr, info_ptr, PNG_FREE_ALL, -1);
    png_destroy_write_struct(&png_ptr, 0);
}

И весь код целиком под спойлером.

Исходный код C++ (с комментариями)

// Подключаем FreeType
#include <freetype2/ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H
 
// Подключаем libpng (http://libpng.sourceforge.net/index.html)
#include <png.h>
 
// Поддержка uint8_t, int32_t и т.д.
#include <stdint.h>
// Поддержка std::string
#include <string>
// Поддержка std::vector
#include <vector>
 
// Получить изображение символа
FT_Glyph getGlyph(FT_Face face, uint32_t charcode);
 
// Получить кернинг между двумя символа
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode);
 
// Сохранить картинку в PNG
void savePNG(uint8_t *image, int32_t width, int32_t height);
 
// Позиция и размер глифа в строке
struct Symbol
{
    // Позиция по горизонтали
    int32_t posX;
    // Позиция по вертикали (от базовой линии)
    int32_t posY;
    // Ширина глифа
    int32_t width;
    // Высота глифа
    int32_t height;
 
    FT_Glyph glyph;
};
 
 
int main()
{
    // Инициализация библиотеки
    FT_Library ftLibrary = 0;
    FT_Init_FreeType(&ftLibrary);
 
    // Загрузка шрифта arial.ttf из текущей папки
    FT_Face ftFace = 0;
    FT_New_Face(ftLibrary, "arial.ttf", 0, &ftFace);
 
    // Установим размер символа для рендеринга
    FT_Set_Pixel_Sizes(ftFace, 100, 0);
 
    // Выводимая строка
    const std::string exampleString("FreeType it's amazing!");
 
    // Набор готовых символов
    std::vector<Symbol> symbols;
    int32_t left = INT_MAX;
    int32_t top = INT_MAX;
    int32_t bottom = INT_MIN;
    uint32_t prevCharcode = 0;
 
    // Позиция текущего символа в формате 26.6
    int32_t posX = 0;
 
    for (std::size_t i = 0; i < exampleString.size(); ++i)
    {
        // Получаем код символа
        const uint32_t charcode = exampleString[i];
 
        // Получаем глиф для этого символа
        FT_Glyph glyph = getGlyph(ftFace, charcode);
 
        if (!glyph)
        {
            // Глифы в шрифте есть не для всех символов
            continue;
        }
 
        if (prevCharcode)
        {
            // Используем кернинг
            posX += getKerning(ftFace, prevCharcode, charcode);
        }
        prevCharcode = charcode;
 
        symbols.push_back(Symbol());
        Symbol &symb = symbols.back();
 
        FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) glyph;
 
        // Вычисляем горизонтальную позицию символа
        symb.posX = (posX >> 6) + bitmapGlyph->left;
 
        // Вычисляем вертикальную позицию символа относительно базовой 
        // линии. Отрицательные значения - сверху, положительные - снизу.
        symb.posY = -bitmapGlyph->top;
 
        // Ширина символа
        symb.width = bitmapGlyph->bitmap.width;
        // Высота символа
        symb.height = bitmapGlyph->bitmap.rows;
 
        // Ссылка на глиф
        symb.glyph = glyph;
 
        // Смещаем позицию текущего символа
        // (glyph->advance имеет формат 16.16, поэтому для приведения 
        // его к формату 26.6 необходимо сдвинуть число на 10 бит враво)
        posX += glyph->advance.x >> 10;
 
        // Вычисляем самую левую позицию
        left = std::min(left, symb.posX);
 
        // Вычисляем самую верхнюю позицию
        top = std::min(top, symb.posY);
 
        // Вычисляем самую нижнюю позицию
        bottom = std::max(bottom, symb.posY + symb.height);
    }
 
    for (std::size_t i = 0; i < symbols.size(); ++i)
    {
        // Смещаем все символы влево, чтобы строка примыкала к левой части
        symbols[i].posX -= left;
    }
 
    const Symbol &lastSymbol = symbols.back();
 
    // Ширина строки (изображения) - это крайняя правая 
    // точка последнего символа в строке
    const int32_t imageW = lastSymbol.posX + lastSymbol.width;
 
    // Высота строки (изображения)
    const int32_t imageH = bottom - top;
 
    // Выделяем память для картинки
    std::vector<uint8_t> image(imageW * imageH);
 
    for (std::size_t i = 0; i < symbols.size(); ++i)
    {
        const Symbol &symb = symbols[i];
 
        FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) symb.glyph;
        FT_Bitmap bitmap = bitmapGlyph->bitmap;
 
        for (int32_t srcY = 0; srcY < symb.height; ++srcY)
        {
            // Координата Y в итоговой картинке
            const int32_t dstY = symb.posY + srcY - top;
 
            for (int32_t srcX = 0; srcX < symb.width; ++srcX)
            {
                // Получаем пиксель из изображения символа,
                // (обязательно используйте pitch вместо width)
                const uint8_t c = bitmap.buffer[srcX + srcY * bitmap.pitch];
 
                // Если пиксель полностью прозрачный, то пропускаем его
                if (0 == c)
                {
                    continue;
                }
 
                // Приводим множество [0..255] к [0..1] для удобства блендинга
                const float a = c / 255.0f;
 
                // Координата X в итоговой картинке
                const int32_t dstX = symb.posX + srcX;
 
                // Вычислим смещение в итоговой картинке
                uint8_t *dst = image.data() + dstX + dstY * imageW;
 
                // Рисуем этот пиксель в итоговую картинку с блендингом
                dst[0] = uint8_t(a * 255 + (1 - a) * dst[0]);
            }
        }
    }
 
    // Сохраняем изображение в PNG формате с прозрачностью
    savePNG(image.data(), imageW, imageH);
 
    // Освобождаем памяти для глифов
    for (std::size_t i = 0; i < symbols.size(); ++i)
    {
        FT_Done_Glyph(symbols[i].glyph);
    }
 
    // Освобождаем шрифт
    FT_Done_Face(ftFace);
    ftFace = 0;
 
    // Заканчиваем работу с библиотекой
    FT_Done_FreeType(ftLibrary);
    ftLibrary = 0;
 
    return 0;
}
 
 
FT_Glyph getGlyph(FT_Face face, uint32_t charcode)
{
    // Загрузка глифа в face->glyph с отрисовкой
    FT_Load_Char(face, charcode, FT_LOAD_RENDER);
 
    FT_Glyph glyph = 0;
    // Получаем глиф
    FT_Get_Glyph(face->glyph, &glyph);
    return glyph;
}
 
 
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode)
{
    // Получаем индекс левого символа
    FT_UInt leftIndex = FT_Get_Char_Index(face, leftCharcode);
    // Получаем индекс правого символа
    FT_UInt rightIndex = FT_Get_Char_Index(face, rightCharcode);
 
    // Здесь будет хранится кернинг в формате 26.6
    FT_Vector delta;
    // Получаем кернинг для двух символов
    FT_Get_Kerning(face, leftIndex, rightIndex, FT_KERNING_DEFAULT, &delta);
    return delta.x;
}
 
 
void savePNG(uint8_t *image, int32_t width, int32_t height)
{
    // Файл для сохранения картинки
    FILE *f = fopen("output.png", "wb");
 
    png_structp png_ptr =
        png_create_write_struct(PNG_LIBPNG_VER_STRING, 0, 0, 0);
 
    png_infop info_ptr = png_create_info_struct(png_ptr);
 
    png_init_io(png_ptr, f);
 
    // Изображение в формате RGBA по 8 бит на 
    // канал и по четыре канала на пиксель
    png_set_IHDR(
        png_ptr, 
        info_ptr, 
        width, 
        height, 
        8, 
        PNG_COLOR_TYPE_RGBA, 
        PNG_INTERLACE_NONE, 
        PNG_COMPRESSION_TYPE_BASE, 
        PNG_FILTER_TYPE_BASE);
 
    png_write_info(png_ptr, info_ptr);
 
    // Одна строка в формате RGBA, 4 канала
    std::vector<uint8_t> row(width * 4);
 
    // Сохраняем PNG построчно
    for (int32_t y = 0; y < height; ++y)
    {
        // Преобразуем нашу строку из одноканальной в формат RGBA
        for (int32_t x = 0; x < width; ++x)
        {
            // Цвет одинаковый для всех пикселей 0x202020
            row[x * 4 + 0] = 0x20;
            row[x * 4 + 1] = 0x20;
            row[x * 4 + 2] = 0x20;
            // Прозрачность берём из исходных данных
            row[x * 4 + 3] = image[y * width + x];
        }
 
        // Сохраняем строку в PNG
        png_write_row(png_ptr, row.data());
    }
 
    png_write_end(png_ptr, 0);    
 
    // Закончили работу, освобождаем ресурсы
    fclose(f);
    png_free_data(png_ptr, info_ptr, PNG_FREE_ALL, -1);
    png_destroy_write_struct(&png_ptr, 0);
}

Исходный код С (без комментариев)

#include <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H
 
#include <png.h>
#include <stdint.h>
 
FT_Glyph getGlyph(FT_Face face, uint32_t charcode);
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode);
void savePNG(uint8_t *image, int32_t width, int32_t height);
 
struct Symbol
{
    int32_t posX;
    int32_t posY;
    int32_t width;
    int32_t height;
    FT_Glyph glyph;
};
 
const size_t MAX_SYMBOLS_COUNT = 128;
 
#define MIN(x, y) ((x) > (y) ? (y) : (x))
#define MAX(x, y) ((x) > (y) ? (x) : (y))
 
 
int main()
{
    FT_Library ftLibrary = 0;
    FT_Init_FreeType(&ftLibrary);
 
    FT_Face ftFace = 0;
    FT_New_Face(ftLibrary, "arial.ttf", 0, &ftFace);
 
    FT_Set_Pixel_Sizes(ftFace, 100, 0);
 
    const char *exampleString = "FreeType it's amazing!";
    const size_t exampleStringLen = strlen(exampleString);
 
    struct Symbol symbols[MAX_SYMBOLS_COUNT];
    size_t numSymbols = 0;
 
    int32_t left = INT_MAX;
    int32_t top = INT_MAX;
    int32_t bottom = INT_MIN;
    uint32_t prevCharcode = 0;
 
    size_t i = 0;
 
    int32_t posX = 0;
 
    for (i = 0; i < exampleStringLen; ++i)
    {
        const uint32_t charcode = exampleString[i];
 
        FT_Glyph glyph = getGlyph(ftFace, charcode);
 
        if (!glyph)
        {
            continue;
        }
 
        if (prevCharcode)
        {
            posX += getKerning(ftFace, prevCharcode, charcode);
        }
        prevCharcode = charcode;
 
        struct Symbol *symb = &(symbols[numSymbols++]);
 
        FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) glyph;
        symb->posX = (posX >> 6) + bitmapGlyph->left;
        symb->posY = -bitmapGlyph->top;
        symb->width = bitmapGlyph->bitmap.width;
        symb->height = bitmapGlyph->bitmap.rows;
        symb->glyph = glyph;
 
        posX += glyph->advance.x >> 10;
 
        left = MIN(left, symb->posX);
        top = MIN(top, symb->posY);
        bottom = MAX(bottom, symb->posY + symb->height);
    }
 
    for (i = 0; i < numSymbols; ++i)
    {
        symbols[i].posX -= left;
    }
 
    const struct Symbol *lastSymbol = &(symbols[numSymbols - 1]);
 
    const int32_t imageW = lastSymbol->posX + lastSymbol->width;
    const int32_t imageH = bottom - top;
 
    uint8_t *image = malloc(imageW * imageH);
 
    for (i = 0; i < numSymbols; ++i)
    {
        const struct Symbol *symb = symbols + i;
 
        FT_BitmapGlyph bitmapGlyph = (FT_BitmapGlyph) symb->glyph;
        FT_Bitmap bitmap = bitmapGlyph->bitmap;
 
        for (int32_t srcY = 0; srcY < symb->height; ++srcY)
        {
            const int32_t dstY = symb->posY + srcY - top;
 
            for (int32_t srcX = 0; srcX < symb->width; ++srcX)
            {
                const uint8_t c = bitmap.buffer[srcX + srcY * bitmap.pitch];
 
                if (0 == c)
                {
                    continue;
                }
 
                const float a = c / 255.0f;
                const int32_t dstX = symb->posX + srcX;
                uint8_t *dst = image + dstX + dstY * imageW;
                dst[0] = (uint8_t)(a * 255 + (1 - a) * dst[0]);
            }
        }
    }
 
    savePNG(image, imageW, imageH);
 
    free(image);
 
    for (i = 0; i < numSymbols; ++i)
    {
        FT_Done_Glyph(symbols[i].glyph);
    }
 
    FT_Done_Face(ftFace);
    ftFace = 0;
 
    FT_Done_FreeType(ftLibrary);
    ftLibrary = 0;
 
    return 0;
}
 
 
FT_Glyph getGlyph(FT_Face face, uint32_t charcode)
{
    FT_Load_Char(face, charcode, FT_LOAD_RENDER);
    FT_Glyph glyph = 0;
    FT_Get_Glyph(face->glyph, &glyph);
    return glyph;
}
 
 
FT_Pos getKerning(FT_Face face, uint32_t leftCharcode, uint32_t rightCharcode)
{
    FT_UInt leftIndex = FT_Get_Char_Index(face, leftCharcode);
    FT_UInt rightIndex = FT_Get_Char_Index(face, rightCharcode);
 
    FT_Vector delta;
    FT_Get_Kerning(face, leftIndex, rightIndex, FT_KERNING_DEFAULT, &delta);
    return delta.x;
}
 
 
void savePNG(uint8_t *image, int32_t width, int32_t height)
{
    FILE *f = fopen("output.png", "wb");
 
    png_structp png_ptr = png_create_write_struct(PNG_LIBPNG_VER_STRING, 0, 0, 0);
 
    png_infop info_ptr = png_create_info_struct(png_ptr);
 
    png_init_io(png_ptr, f);
 
    png_set_IHDR(
        png_ptr, 
        info_ptr, 
        width, 
        height, 
        8, 
        PNG_COLOR_TYPE_RGBA, 
        PNG_INTERLACE_NONE, 
        PNG_COMPRESSION_TYPE_BASE, 
        PNG_FILTER_TYPE_BASE);
 
    png_write_info(png_ptr, info_ptr);
 
    uint8_t *row = malloc(width * 4);
 
    for (int32_t y = 0; y < height; ++y)
    {
        for (int32_t x = 0; x < width; ++x)
        {
            row[x * 4 + 0] = 0xc0;
            row[x * 4 + 1] = 0xc0;
            row[x * 4 + 2] = 0xc0;
            row[x * 4 + 3] = image[y * width + x];
        }
 
        png_write_row(png_ptr, row);
    }
 
    free(row);
 
    png_write_end(png_ptr, 0);    
 
    png_free_data(png_ptr, info_ptr, PNG_FREE_ALL, -1);
    png_destroy_write_struct(&png_ptr, 0);
 
    fclose(f);
}

UPD: Если вам необходимо получить данные о символах в векторном виде, рекомендую ознамиться с этим примером, особенно со структурой FT_Outline_Funcs и функцией FT_Outline_Decompose().

25 комментариев
  1. написал(а) Пользователь (16 февраля 2019, 19:22)

    Сделайте, пожалуйста, код на Си. Буду очень благодарен!

    1. написал(а) eJ (18 февраля 2019, 17:07)

      Добавил код на Си. Комментарии, правда, пришлось удалить — лениво было исправлять на Си-style.

  2. написал(а) Дмитрий (27 февраля 2019, 05:22)

    А у меня другая реализация, но я не могу понять как в пикселях получить размер до следующего символа? Можете написать? А то я сдвигал advance.x >> 10 а там всё равно большое число получается.

    1. написал(а) eJ (27 февраля 2019, 16:54)

      Попробуйте сдвинуть advance.x на 16 вправо (там формат 16.16) и получите искомый размер.

      Обратите внимание, что в моём коде переменная posX в формате 26.6

    1. написал(а) eJ (27 февраля 2019, 17:03)

      Всё хорошо, но ты относишься к глифам как к картинкам, а это неверно. Нет учёта ни кернинга, ни отступа advance…

  3. написал(а) Антон (18 сентября 2019, 15:23)

    А как мне выводить текст если я хочу это делать отдельными битмапками , тоесть из глифа получаю битмап и вывожу и т д . Проблема в том что я не могу правильно позиционировать картинку , тоесть например y находится наверху ,а не как должен снизу , точки тоже вверху

  4. написал(а) Сергей (21 июня 2020, 21:33)

    Как собрать freetype2 проект для freebsd.
    Спасибо

    1. написал(а) eJ (21 июня 2020, 22:13)
      1. Установить freetype2 из портов коммандой:
        cd /usr/ports/print/freetype2 && make install clean
      2. Заставить компилятор линковаться с freetype2 и искать заголовки в нужной папке:
        clang++ program.cpp -I'/usr/local/include/freetype2' -L'/usr/local/lib/' -lfreetype
  5. написал(а) Евгений (12 февраля 2021, 10:26)

    Добрый день. Подскажите как осуществить переход на следующую строку. Например создать PNG изображение в котором первая строка это первые 32 символа, вторая строка следующие 32 символа и т.д. чтобы получилась квадратная картинка в формате PNG отображающая все символы загруженного шрифта. Спасибо.

    1. написал(а) eJ (13 февраля 2021, 22:58)

      Не помню способ определения расстояния между строками, поэтому выбирайте его на глаз. Таким образом вам необходимо нарисовать первую строку, затем перейти на Y (расстояние между строками) пикселей вниз и повторить рисование строки. Ещё обратите внимание, что у вас не получатся ровные ряды символов, если исходный шрифт не моноширинный (каждый символ занимает одинаковую ширину).

      1. написал(а) Евгений (15 февраля 2021, 08:46)

        Спасибо за ответ. Я ввел вручную параметры imageW = 2000 и imageH = 2000, получив тем самым квадратную картинку, теперь я хочу заполнить эту картинку символами. Подскажите где именно в программе задаётся расстояние между строками и как осуществить переход на следующую строку? Я уже все параметры попробовал поменять удалось только подвигать строку вперед назад, и записать вторую строку поверх первой, никак не могу понять. Спасибо.

  6. написал(а) Alex (4 октября 2021, 17:52)

    Я прошу прощения, но почему-то не въехал в позициаонирование по оси Y. У меня получается и у заглавной «Р» и у обычной «р» число в поле top одинаковое. Можно чуть подробнее про алгоритм позиционирования по оси Y?

    1. написал(а) eJ (4 октября 2021, 18:06)

      Вы запускаете мой код и получаете одинаковое число в поле top? Не может такого быть.

      1. написал(а) Alex (4 октября 2021, 21:01)

        Нет, по аналогии написал свой. И получаю такой результат. Поэтому и интересуюсь о том, что за значение лежит в поле top и как его использовать.

        1. написал(а) eJ (4 октября 2021, 22:49)

          Либо у вас ошибка в коде, либо одно из двух. Посмотрите пошагово его в отладчике. Если совсем ничего не поможет, положите его куда-нибудь и скиньте ссылку — я посмотрю, но уверен, что там какая-то глупая опечатка.

          1. написал(а) Alex (5 октября 2021, 10:19)

            Наверняка так и есть. Я отладчиком смотрел, и сравнивал код несколько раз. Там уж не такой сложный код вроде. Но тем не менее.
            Вот ссылка на проект, консоль в Embarcadero C++ Builder Community Edition.https://disk.yandex.ru/d/QGoBrR0GIiPkmg

          2. написал(а) eJ (5 октября 2021, 10:23)

            Обратите внимание — как вы получаете глиф. Вы пропустили вызов FT_Get_Gliph()

  7. написал(а) Alex (4 октября 2021, 21:36)

    Прошу прощения, были какие-то глюки и я не видел своих комментариев после отправки, поэтому наплодил одинаковых.

    1. написал(а) eJ (4 октября 2021, 21:39)

      Ничего, всё нормально, это мой сайт кривоват.

  8. написал(а) Аноним (5 октября 2021, 11:09)

    Большое спасибо. Дело было действительно в этом. Переписал с учетом Вашего замечания и все заработало.
    Куда отправить магарыч? )))))

    1. написал(а) eJ (5 октября 2021, 11:20)

      Пожалуйста, пользуйтесь на здоровье.

  9. написал(а) Alex (8 октября 2021, 14:22)

    Приветствую.
    А Вы, случайно, не в курсе, где-то можно посмотреть размер максимального символа после выполнения функции «FT_Set_Pixel_Sizes»? Ну в смысле уже растрового изображения? Или растровое изображение формируется только вызовом функции «FT_Load_Char»?

    1. написал(а) eJ (8 октября 2021, 14:27)

      Посмотрите структуру ftFace->size->metrics (max_advance и ascender-descender). Данные там в формате 26.6, для получения пикселей надо сдвинуть их вправо на 6 бит.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог Евгения Жирнова