李锦俊(mybios)的blog

游戏开发 C++ Cocos2d-x OpenGL DirectX 数学 计算机图形学 SQL Server

  C++博客 :: 首页 :: 联系 :: 聚合  :: 管理
  86 Posts :: 0 Stories :: 370 Comments :: 0 Trackbacks

公告

QQ:30743734
EMain:mybios@qq.com

常用链接

留言簿(16)

我参与的团队

最新随笔

搜索

  •  

积分与排名

  • 积分 - 361888
  • 排名 - 66

最新评论

阅读排行榜

评论排行榜

使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果

 

前言:

Freetype是一个跨平台、开源的字体渲染器,网上很多文章介绍,本人就不啰嗦了。本文重点在于实现文章标题所属的各种效果,不是Freetype的基本使用方法介绍文档,所以对于Freetype不熟悉的同学们请先学习下Freetype的基本用法,才可以使用本文中所提及的方法。

正文:

FreeType实现矢量字体的粗体、斜体、描边、阴影效果不是一件容易的事,本人认为皆因Freetype的接口太过于底层化,Freetype没有对其进行上层包装,所以要实现这些对于软件/游戏来说的基本效果,都是件挺麻烦的事情。不过,问题总是会有解决方法的,这些效果的实现,请听本人一个个道来:

1.      加粗

加粗可以使用FreeType中的一个API来实现FT_Outline_Embolden,但是这个API不支持水平垂直方向加粗量的分别设置,所以,需要参照FT_Outline_Embolden的实现重新编写一个函数,GDI++已经做了这个事情,引用它的代码:

 

// 就是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    
inout;
            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    
inout;
            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 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中可以通过矩阵变换来实现,只要把矩阵设置成一个切边矩阵就可以了,方法如下:

// 倾斜度,越大就越斜
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.
     
描边

网上有不少文章说描边其实很简单,就是上下左右各移动一个像素渲染一次,最后在中间再渲染一次就可以了。但是,这种方法只对于位图字体有效,对于矢量字体,效果就不好了,特别是大字体,1个像素只是很细的边界而已,对于很小的字体,1像素又显得太大。

这里提供另一种实现方案,使用的是FreetypeAPI

4.         使用FT_Stroker_New创建一个笔触

5.         FT_Stroker_Set设置笔触为描边

6.         Load后的glyph通过FT_Glyph_Copy拷贝一份出来

7.         对这个拷贝出来的glyph使用FT_Glyph_StrokeBorder设置成描边渲染

8.         使用FT_Outline_Render渲染这个描边的glyph,渲染前要设置FT_Raster_Params参数成: 

FT_Raster_Params params;
memset(
&params0sizeof(params));
params.flags = FT_RASTER_FLAG_AA | FT_RASTER_FLAG_DIRECT;
params.gray_spans = RasterCallback;

 

9.         在回调函数RasterCallback中实现像素化到位图中

10.     对原来的glyph执行8操作,在回调函数RasterCallback中实现像素化到位图中,像素化过程使用alphablend的方式绘制上去

11.     把位图渲染到屏幕上或保存到文件中

 

这个方法是Freetype的一个example,只是很少有人注意而已,源码在这里http://www.freetype.org/freetype2/docs/tutorial/example2.cpp


 
12. 阴影

阴影的实现就比较简单了,只要一个个像素偏移后多渲染几次就可以了,再次不多说。

 


如果本文对你的开发有所帮助,并且你手头恰好有零钱。

不如打赏我一杯咖啡,鼓励我继续分享优秀的文章。




posted on 2009-08-01 10:42 李锦俊(mybios) 阅读(18240) 评论(8)  编辑 收藏 引用 所属分类: 3D引擎开发

Feedback

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2009-08-14 09:02 蜡笔小新
楼猪乃freetype达人。本人研究了一年就被你一笔带过。我还弄不明白freetype的描边效果如何优雅的实现。  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2009-08-20 11:31 mybios
@蜡笔小新
你去下载这个我文章中提及的demo回来编译下,单步跟踪下,应该就能明白我说的方法了。  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2009-10-13 12:01 三雄
赞赞赞  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2010-06-10 20:06 小胖子
楼主,你太好了。正好需要用到这方面的东东!!!谢谢说一万声也太短  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2010-07-14 21:30 song
LZ有研究过ft字体光边如何实现么? 我试了下上面说的描边,我还不知道要怎么alphablend,我画出来和加粗没什么区别啊。。。  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2012-05-09 17:50 ruf
斜体明显有问题,去测试下T字母,用msyh.ttf..  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2012-11-02 05:56 sgf
FreeType 用起来还是挺麻烦的。。。。  回复  更多评论
  

# re: 使用FreeType实现矢量字体的粗体、斜体、描边、阴影效果 2015-10-19 16:12 kkkkkkk
同时支持阴影和描边 麻烦吗。  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理