freetype2 で文字列描画 (実践編)

はじめに

日本語描画が必要だったので、freetypeを使用し実践的なコード組んでみた。
OpenCV 3.2 でFreetype描画がサポートされたようだが、痒い所に手が届かなそう(CalcRectが無いとか)だったので、結局実装してみた。

Freetype のAPI referenceなど

API reference
https://www.freetype.org/freetype2/docs/reference/ft2-index.html

Tutorial
https://www.freetype.org/freetype2/docs/tutorial/step1.html
https://www.freetype.org/freetype2/docs/tutorial/step2.html

Sample
https://www.freetype.org/freetype2/docs/tutorial/example1.c
https://www.freetype.org/freetype2/docs/tutorial/example2.cpp

作成コード

全体はgitで。
https://github.com/blue777/NanoPi-NEO/blob/master/common/img_font.h

クラス

クラス名：ImageFont

メソッド	概要
ImageFont( const char* filename, uint32_t height, bool isFitHeight=true )	コンストラクタ
CalcRect( int& left, int& top, int& right, int& bottom, const char* str )	文字列の描画サイズ計算
DrawTextGRAY( int x, int y, const char* str, uint8_t color, uint8_t * image, int stride, int cx, int cy )	Grayバッファへの文字列描画
DrawTextBGRA( int x, int y, const char* str, uint32_t color, uint8_t * image, int stride, int cx, int cy )	BGRAバッファへの文字列描画(α値指定描画対応)

コンストラクタ

基本的な初期化を行う。
指定した高さからはみ出て描画(baseline管理になるので、gjpqyなど基準線より下の部分)されるので、はみ出ないように調整する機能も付けている。

メンバ変数

    FT_Library      m_piLibrary;
    FT_Face         m_piFace;
    int             m_nBaseline;

ImageFont()

    ImageFont( const char* filename, uint32_t height, bool isFitHeight=true )
    {
        FT_Error            error;
        FT_Size_RequestRec  tReqSize;

        // initialize member var.
        m_nBaseline     = height;
        m_piLibrary     = NULL;
        m_piFace        = NULL;

        error   = FT_Init_FreeType( &m_piLibrary );
        if( 0 != error )
        {
            throw   "ERROR: FT_Init_FreeType()";
        }

        error   = FT_New_Face( m_piLibrary, filename, 0, &m_piFace );
        if( 0 != error )
        {
            throw   "ERROR: FT_New_Face";
        }

        tReqSize.type           = FT_SIZE_REQUEST_TYPE_NOMINAL;
        tReqSize.width          = 0;
        tReqSize.height         = (height << 6);
        tReqSize.horiResolution = 0;
        tReqSize.vertResolution = 0;

        if( isFitHeight )
        {
            //  b. Scaled Global Metrics
            int     yMax    = m_piFace->bbox.yMax;
            int     yMin    = m_piFace->bbox.yMin;

            m_nBaseline     = height * yMax / (yMax - yMin);

            tReqSize.type   = FT_SIZE_REQUEST_TYPE_BBOX;
            tReqSize.height = (height << 6);
        }

        error   = FT_Request_Size( m_piFace, &tReqSize );
        if( 0 != error )
        {
            throw   "ERROR: FT_Request_Size()";
        }
    }

BGRA描画部

Freetypeに渡す際には、UNICODE32で1文字ずつ渡し描画する必要がある。

colorの上位8bitはα値で、文字列の半透明描画も出来るようにしてみている。
なお、BGRAは、OpenCVのCV_8UC4互換である。

DrawTextBGRA()

    int DrawTextBGRA( int x, int y, const char* str, uint32_t color, uint8_t * image, int stride, int cx, int cy )
    {
        std::u32string  u32str  = std::wstring_convert<std::codecvt_utf8<char32_t>, char32_t>().from_bytes(str);

        return  DrawTextBGRA( x, y, u32str, color, image, stride, cx, cy );
    }

    int DrawTextBGRA( int x, int y, const std::u32string& u32str, uint32_t color, uint8_t * image, int stride, int cx, int cy )
    {
        FT_Error        error;
        FT_GlyphSlot    slot    = m_piFace->glyph;
        FT_Matrix       matrix  = { 1 << 16, 0, 0, 1 << 16 };
        FT_Vector       pen     = { 0, 0 };
        uint32_t        alpha   = (color >> 24) + (color >> 31);

        for( size_t i = 0; i < u32str.size(); i++ )
        {
            switch( u32str[i] )
            {
            case '\r':
                break;

            case '\t':
                pen.x   += m_piFace->size->metrics.max_advance * 4;
                pen.x   -= pen.x % (m_piFace->size->metrics.max_advance * 4);
                break;

            case '\n':
                pen.x   = 0;
                pen.y   -= m_piFace->size->metrics.height;
                break;

            default:
                FT_Set_Transform( m_piFace, &matrix, &pen );

                error   = FT_Load_Char( m_piFace, u32str[i], FT_LOAD_RENDER );
                if( 0 == error )
                {
                    int bmp_cy  = slot->bitmap.rows;
                    int pos_y   = y + m_nBaseline - slot->bitmap_top;
                    int rs      = 0 <= pos_y ? 0 : -pos_y;
                    int re      = (pos_y + bmp_cy) <= cy ? bmp_cy : (cy - pos_y);

                    int bmp_cx  = slot->bitmap.width;
                    int pos_x   = x + slot->bitmap_left;
                    int cs      = 0 <= pos_x ? 0 : -pos_x;
                    int ce      = (pos_x + bmp_cx) <= cx ? bmp_cx : (cx - pos_x);

                    for( int r = rs; r < re; r++ )
                    {
                        uint8_t *   src_line    = &slot->bitmap.buffer[ bmp_cx * r ];
                        uint8_t *   dst_line    = &image[ stride * (pos_y + r) + (pos_x * 4) ];
                        int         c           = cs;

                        for( ; c < ce; c++ )
                        {
                            int32_t a   = src_line[c+0];

                            if( 0 < a )
                            {
                                uint8_t*    clr = (uint8_t*)&color;
                                int32_t     d0  = dst_line[c*4+0];
                                int32_t     d1  = dst_line[c*4+1];
                                int32_t     d2  = dst_line[c*4+2];
                                int32_t     d3  = dst_line[c*4+3];

                                a   += a >> 7;
                                a   *= alpha;

                                dst_line[c*4+0] = (uint8_t)( ((d0 << 16) + (clr[0] - d0) * a) >> 16 );
                                dst_line[c*4+1] = (uint8_t)( ((d1 << 16) + (clr[1] - d1) * a) >> 16 );
                                dst_line[c*4+2] = (uint8_t)( ((d2 << 16) + (clr[2] - d2) * a) >> 16 );
                                dst_line[c*4+3] = (uint8_t)( ((d3 << 16) + (clr[3] - d3) * a) >> 16 );
                            }
                        }
                    }

                    pen.x   += slot->advance.x;
                    pen.y   += slot->advance.y;
                }
                break;
            }
        }

        return  0;
    }

呼び出しサンプル

最初写真は、この実行結果になります。
UTF-8をUNICODE32に変換して、Freetypeでbitmap化して、αブレンドしながら描画し、OLEDに表示しています。

各種ディスプレイの接続などは、NanoPi-NEOと5種のLCDと2種のOLED にて。

コンパイルコマンド例：

g++ -O3 -std=c++11 Sample.cpp -o Sample.o `freetype-config --cflags` `freetype-config --libs`

実装サンプル

Sample

#include "common/img_font.h"
#include "common/display_ssd1306_i2c.h"
#include "common/display_st7735_spi.h"
#include "common/display_ili9225_spi.h"
#include "common/display_ili9328_spi.h"
#include "common/display_ili9341_spi.h"

#define FONT_PATH   "/usr/share/fonts/truetype/takao-gothic/TakaoPGothic.ttf"

int main()
{
    const int   buf_width   = 320;
    const int   buf_height  = 240;
    const int   buf_stride  = buf_width * 4;
    uint8_t     buf[buf_width*buf_height*4];

    std::vector<DisplayIF*> display;

//  display.push_back( new Display_ILI9225_spi(270) );
//  display.push_back( new Display_ILI9341_spi_TM24(270) );
//  display.push_back( new Display_ILI9341_spi_TM22(270) );
//  display.push_back( new Display_ILI9341_spi(270) );
//  display.push_back( new Display_ILI9328_spi_TM22(270) );
//  display.push_back( new Display_ST7735_spi(270) );
    display.push_back( new Display_SSD1306_i2c(180) );

    for( auto it : display )
    {
        it->Init();
        it->DispOn();
        it->DispClear();
    }

    ImageFont   iFont1( FONT_PATH, 32 );    
    ImageFont   iFont2( FONT_PATH, 64 );
    const char* pszText1    = u8"こんにちわ";
    const char* pszText2    = u8"世界";
    int         cx, cy;

    memset( buf, 0, sizeof(buf) );
    iFont1.DrawTextBGRA(  0, 0, pszText1, 0xFFFFFFFF, buf, buf_stride, buf_width, buf_height );
    iFont2.DrawTextBGRA( 16, 8, pszText2, 0xA000FF00, buf, buf_stride, buf_width, buf_height );

    for( auto it : display )
    {
        it->WriteImageBGRA( 0, 0, buf, buf_stride, buf_width, buf_height );
    }

    FILE*   fp  = fopen("image.bin", "wb");
    if( fp != NULL )
    {
        fwrite( buf, buf_stride, buf_height, fp );
        fclose( fp );
    }

    getchar();
    return  0;
}

ファイル保存した結果は、以下のようになる。

おわかりいただけただろうか？
世界がαブレンド描画されている。