使用FreeType實現(xiàn)矢量字體的粗體、斜體、描邊、陰影效果
前言：
Freetype是一個跨平臺、開源的字體渲染器，網(wǎng)上很多文章介紹，本人就不啰嗦了。本文重點在于實現(xiàn)文章標(biāo)題所屬的各種效果，不是Freetype的基本使用方法介紹文檔，所以對于Freetype不熟悉的同學(xué)們請先學(xué)習(xí)下Freetype的基本用法，才可以使用本文中所提及的方法。
正文：
用FreeType實現(xiàn)矢量字體的粗體、斜體、描邊、陰影效果不是一件容易的事，本人認(rèn)為皆因Freetype的接口太過于底層化，F(xiàn)reetype沒有對其進行上層包裝，所以要實現(xiàn)這些對于軟件/游戲來說的基本效果，都是件挺麻煩的事情。不過，問題總是會有解決方法的，這些效果的實現(xiàn)，請聽本人一個個道來：
1. 加粗
加粗可以使用FreeType中的一個API來實現(xiàn)FT_Outline_Embolden，但是這個API不支持水平垂直方向加粗量的分別設(shè)置，所以，需要參照FT_Outline_Embolden的實現(xiàn)重新編寫一個函數(shù)，GDI++已經(jīng)做了這個事情，引用它的代碼：
// 就是FT_Outline_Embolden
FT_Error Old_FT_Outline_Embolden( FT_Outline* outline, FT_Pos strength )
{
FT_Vector* points;
FT_Vector v_prev, v_first, v_next, v_cur;
FT_Angle rotate, angle_in, angle_out;
FT_Int c, n, first;
FT_Int orientation;
if ( !outline )
return FT_Err_Invalid_Argument;
strength /= 2;
if ( strength == 0 )
return FT_Err_Ok;
orientation = FT_Outline_Get_Orientation( outline );
if ( orientation == FT_ORIENTATION_NONE )
{
if ( outline->n_contours )
return FT_Err_Invalid_Argument;
else
return FT_Err_Ok;
}
if ( orientation == FT_ORIENTATION_TRUETYPE )
rotate = -FT_ANGLE_PI2;
else
rotate = FT_ANGLE_PI2;
points = outline->points;
first = 0;
for ( c = 0; c < outline->n_contours; c++ )
{
int last = outline->contours[c];
v_first = points[first];
v_prev = points[last];
v_cur = v_first;
for ( n = first; n <= last; n++ )
{
FT_Vector in, out;
FT_Angle angle_diff;
FT_Pos d;
FT_Fixed scale;
if ( n < last )
v_next = points[n + 1];
else
v_next = v_first;
/**//* compute the in and out vectors */
in.x = v_cur.x - v_prev.x;
in.y = v_cur.y - v_prev.y;
out.x = v_next.x - v_cur.x;
out.y = v_next.y - v_cur.y;
angle_in = FT_Atan2( in.x, in.y );
angle_out = FT_Atan2( out.x, out.y );
angle_diff = FT_Angle_Diff( angle_in, angle_out );
scale = FT_Cos( angle_diff / 2 );
if ( scale < 0x4000L && scale > -0x4000L )
in.x = in.y = 0;
else
{
d = FT_DivFix( strength, scale );
FT_Vector_From_Polar( &in, d, angle_in + angle_diff / 2 - rotate );
}
outline->points[n].x = v_cur.x + strength + in.x;
//伀偙傟傪僐儊儞僩傾僂僩偟偨偩偗
//outline->points[n].y = v_cur.y + strength + in.y;
v_prev = v_cur;
v_cur = v_next;
}
first = last + 1;
}
return FT_Err_Ok;
}
// 垂直加粗
FT_Error Vert_FT_Outline_Embolden( FT_Outline* outline, FT_Pos strength )
{
FT_Vector* points;
FT_Vector v_prev, v_first, v_next, v_cur;
FT_Angle rotate, angle_in, angle_out;
FT_Int c, n, first;
FT_Int orientation;
if ( !outline )
return FT_Err_Invalid_Argument;
strength /= 2;
if ( strength == 0 )
return FT_Err_Ok;
orientation = FT_Outline_Get_Orientation( outline );
if ( orientation == FT_ORIENTATION_NONE )
{
if ( outline->n_contours )
return FT_Err_Invalid_Argument;
else
return FT_Err_Ok;
}
if ( orientation == FT_ORIENTATION_TRUETYPE )
rotate = -FT_ANGLE_PI2;
else
rotate = FT_ANGLE_PI2;
points = outline->points;
first = 0;
for ( c = 0; c < outline->n_contours; c++ )
{
int last = outline->contours[c];
v_first = points[first];
v_prev = points[last];
v_cur = v_first;
for ( n = first; n <= last; n++ )
{
FT_Vector in, out;
FT_Angle angle_diff;
FT_Pos d;
FT_Fixed scale;
if ( n < last )
v_next = points[n + 1];
else
v_next = v_first;
/**//* compute the in and out vectors */
in.x = v_cur.x - v_prev.x;
in.y = v_cur.y - v_prev.y;
out.x = v_next.x - v_cur.x;
out.y = v_next.y - v_cur.y;
angle_in = FT_Atan2( in.x, in.y );
angle_out = FT_Atan2( out.x, out.y );
angle_diff = FT_Angle_Diff( angle_in, angle_out );
scale = FT_Cos( angle_diff / 2 );
if ( scale < 0x4000L && scale > -0x4000L )
in.x = in.y = 0;
else
{
d = FT_DivFix( strength, scale );
FT_Vector_From_Polar( &in, d, angle_in + angle_diff / 2 - rotate );
}
//outline->points[n].x = v_cur.x + strength + in.x;
//仾偙傟傪僐儊儞僩傾僂僩偟偨偩偗
outline->points[n].y = v_cur.y + strength + in.y;
v_prev = v_cur;
v_cur = v_next;
}
first = last + 1;
}
return FT_Err_Ok;
}
// 新的加粗函數(shù)
FT_Error New_FT_Outline_Embolden( FT_Outline* outline, FT_Pos str_h, FT_Pos str_v )
{
if ( !outline ) return FT_Err_Invalid_Argument;
int orientation = FT_Outline_Get_Orientation( outline );
if ( orientation == FT_ORIENTATION_NONE )
if ( outline->n_contours ) return FT_Err_Invalid_Argument;
Vert_FT_Outline_Embolden( outline, str_v );
Old_FT_Outline_Embolden( outline, str_h );
return FT_Err_Ok;
}
// 讓一個字體槽加粗，并且填充其他的大小屬性
void New_GlyphSlot_Embolden( FT_GlyphSlot slot , const Vector2Float &embolden)
{
if(embolden == Vector2Float::ZERO)
return;
FT_Library library = slot->library;
FT_Face face = slot->face;
FT_Error error;
FT_Pos xstr = embolden.x, ystr = embolden.y;
if ( slot->format != FT_GLYPH_FORMAT_OUTLINE &&
slot->format != FT_GLYPH_FORMAT_BITMAP )
return;
if ( slot->format == FT_GLYPH_FORMAT_OUTLINE )
{
FT_BBox oldBox;
FT_Outline_Get_CBox(&slot->outline , &oldBox);
error = New_FT_Outline_Embolden( &slot->outline, xstr , ystr);
if ( error )
return;
FT_BBox newBox;
FT_Outline_Get_CBox(&slot->outline , &newBox);
xstr = (newBox.xMax - newBox.xMin) - (oldBox.xMax - oldBox.xMin);
ystr = (newBox.yMax - newBox.yMin) - (oldBox.yMax - oldBox.yMin);
}
else if ( slot->format == FT_GLYPH_FORMAT_BITMAP )
{
xstr = FT_PIX_FLOOR( xstr );
if ( xstr == 0 )
xstr = 1 << 6;
ystr = FT_PIX_FLOOR( ystr );
error = FT_Bitmap_Embolden( library, &slot->bitmap, xstr, ystr );
if ( error )
return;
}
if ( slot->advance.x )
slot->advance.x += xstr;
if ( slot->advance.y )
slot->advance.y += ystr;
slot->metrics.width += xstr;
slot->metrics.height += ystr;
slot->metrics.horiBearingY += ystr;
slot->metrics.horiAdvance += xstr;
slot->metrics.vertBearingX -= xstr / 2;
slot->metrics.vertBearingY += ystr;
slot->metrics.vertAdvance += ystr;
if ( slot->format == FT_GLYPH_FORMAT_BITMAP )
slot->bitmap_top += ystr >> 6;
}2. 斜體
斜體在FreeType中可以通過矩陣變換來實現(xiàn)，只要把矩陣設(shè)置成一個切邊矩陣就可以了，方法如下：
// 傾斜度，越大就越斜
float lean = 0.5f;
FT_Matrix matrix;
matrix.xx = 0x10000L;
matrix.xy = lean * 0x10000L;
matrix.yx = 0;
matrix.yy = 0x10000L;
FT_Set_Transform( face, &matrix, 0 );
3. 描邊
網(wǎng)上有不少文章說描邊其實很簡單，就是上下左右各移動一個像素渲染一次，最后在中間再渲染一次就可以了。但是，這種方法只對于位圖字體有效，對于矢量字體，效果就不好了，特別是大字體，1個像素只是很細(xì)的邊界而已，對于很小的字體，1像素又顯得太大。
這里提供另一種實現(xiàn)方案，使用的是Freetype的API：
4. 使用FT_Stroker_New創(chuàng)建一個筆觸
5. FT_Stroker_Set設(shè)置筆觸為描邊
6. 把Load后的glyph通過FT_Glyph_Copy拷貝一份出來
7. 對這個拷貝出來的glyph使用FT_Glyph_StrokeBorder設(shè)置成描邊渲染
8. 使用FT_Outline_Render渲染這個描邊的glyph，渲染前要設(shè)置FT_Raster_Params參數(shù)成：
FT_Raster_Params params;
memset(¶ms, 0, sizeof(params));
params.flags = FT_RASTER_FLAG_AA | FT_RASTER_FLAG_DIRECT;
params.gray_spans = RasterCallback;
9. 在回調(diào)函數(shù)RasterCallback中實現(xiàn)像素化到位圖中
10. 對原來的glyph執(zhí)行8操作，在回調(diào)函數(shù)RasterCallback中實現(xiàn)像素化到位圖中，像素化過程使用alphablend的方式繪制上去
11. 把位圖渲染到屏幕上或保存到文件中
這個方法是Freetype的一個example，只是很少有人注意而已，源碼在這里http://www.freetype.org/freetype2/docs/tutorial/example2.cpp。
12. 陰影
陰影的實現(xiàn)就比較簡單了，只要一個個像素偏移后多渲染幾次就可以了，再次不多說。
如果本文對你的開發(fā)有所幫助，并且你手頭恰好有零錢。
不如打賞我一杯咖啡，鼓勵我繼續(xù)分享優(yōu)秀的文章。
