打印
[技术讨论]

百问LCD Framebuffer应用开发 - freetype搭建与使用

[复制链接]
199|0
手机看帖
扫描二维码
随时随地手机跟帖
跳转到指定楼层
楼主
神棍地海棠|  楼主 | 2024-11-25 11:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
1.6 使用freetype[color=var(--c-text-accent)][size=0.85em]#1.5.1 矢量字体引入
​ 点阵显示英文字母,汉字时,大小固定,如果放大会有锯齿出现,为了解决这个问题,引用矢量字体。
矢量字体形成分三步,若干的关键点,数学曲线(贝塞尔曲线),填充颜色组合而成。
①假设A字母的关键点如图中的黄色圈圈,确定关键点。
②用数学曲线将关键点都连接起来,成为封闭的曲线。
③最后把封闭空间填满颜色,就显示出一个A字母。
​ 如果需要放大或者缩小字体,关键点的相对位置是不变的,跟进放大比例放大或缩小,但是相对位置不变,好像分数中的1/2 和 2/4,比例是不变的,但是值却大了,类似这个味道。
[color=var(--c-text-accent)][size=0.85em]#1.5.2 Freetype理论介绍
​ 开源的Freetype字体引擎库它提供统一的接口来访问多种字体格式文件,从而实现矢量字体显示。我们只需要移植这个字体引擎,调用对应的API接口,提供字体关键点,就可以让freetype库帮我们实现闭合曲线,填充颜色,达到显示矢量字体的目的。
关键点(glyph)存在字体文件中,Windows使用的字体文件在FONTS目录下,扩展名为TTF的都是矢量字库,本次使用实验使用的是新宋字体simsun.ttc。
字体文件结构如上图
​ Charmaps表示字符映射表,字体文件可能支持哪一些编码,GBK,UNICODE,BIG5还是别的编码,如果字体文件支持该编码,跟进编码,通过charmap,找到对应的glyph,一般而言都支持UNICODE码。
有了以上基础,我们想象一个文字的显示过程
  • ①给定一个文字吗‘A’(0x41),‘中’(GBK,UNICODE ,BIG5)可以确定它的编码值;
  • ②跟进编码值,从枝头文件中通过charmap找到对应的关键点(glyph);
  • ③设置字体大;
  • ④用某些函数把关键点(glyph)缩放为我们设置的字体大小;
  • ⑤转换为位图点阵
  • ⑥在LCD上显示出来
​ 如上图,参照step1,step2,step3里的内容,可以学习如何使用freetype库,大致总结下,为如下步骤。
①初始化:FT_InitFreetype
②加载(打开)字体Face:FT_New_Face
③设置字体大小:FT_Set_Char_Sizes 或 FT_Set_Pixel_Sizes
④选择charmap:FT_Select_Charmap
⑤根据编码值charcode找到glyph : glyph_index = FT_Get_Char_Index(face,charcode)
⑥根据glyph_index取出glyph:FT_Load_Glyph(face,glyph_index)
⑦转为位图:FT_Render_Glyph
⑧移动或旋转:FT_Set_Transform
[color=var(--c-text-accent)][size=0.85em]#1.5.2 在LCD上显示一个矢量字体
我们可以参考上图位置的c程序,编写程序。
①初始化freetype库
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4872        error = FT_Init_FreeType( &library );                /* initialize library */
[color=var(--code-ln-color)]


②用freetype库中的FT_New_Face函数创建一个face字体文件对象,保存在&face中
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4875    error = FT_New_Face( library, argv[1, 0, &face ); /* create face object */
[color=var(--code-ln-color)]


③提取face对象中的glyph,即关键点集
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4877    slot = face->glyph;
[color=var(--code-ln-color)]


④设置像素点大小,24*24
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4879    FT_Set_Pixel_Sizes(face, 24, 0);
[color=var(--code-ln-color)]


⑤确定坐标
​ 目前我们前面所用的都是LCD的坐标系对应的x与y坐标,然后在freetype上却是使用的笛卡尔坐标系,因此我们还需要转换x与y坐标。
我们将要显示的是‘繁’字,根据上图可知,先计算在lcd坐标系的情况下‘繁’字
的左下角的x坐标与y坐标,因为在笛卡尔坐标中左下角为字符的原点,‘A’是的左上角为整个屏幕的中心点,即(xres/2,yres/2)。
  • lcd_x = var.xres/2 + 8 + 16;lcd_y = var.yres/2 + 16
  • 则笛卡尔座标系:x = lcd_x = var.xres/2 + 8 + 16 ; y = var.yres - lcd_y = var.yres/2 – 16
  • 单位是1/64像素,所以需要乘以64
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4888        pen.x = (var.xres/2 + 8 + 16) * 64;4889        pen.y = (var.yres/2 - 16) * 64;48904891        /* set transformation */4892    FT_Set_Transform( face, 0, &pen);
[color=var(--code-ln-color)]






⑥找到glyph的位置,然后取出,并转换为位图
[backcolor=var(--code-bg-color)]4895    error = FT_Load_Char( face, chinese_str[0, FT_LOAD_RENDER );4896        if (error)4897        {4898                printf("FT_Load_Char error\n");4899                return -1;4900        }
[color=var(--code-ln-color)]







FT_Load_Char函数调用替代了上图这3步。
最后把转换出来的位图打印出来,也是参考example1.c编写
程序文件:freetype_show_font.c
[backcolor=var(--code-bg-color)]4902           draw_bitmap( &slot->bitmap,4903                         slot->bitmap_left,4904                         var.yres - slot->bitmap_top);
[color=var(--code-ln-color)]




程序文件:example1.c
修改上图3处位置
  • Width宽度:因为在LCD上显示,宽度自然就是x方向的像素点数,var.xres;
  • Height高度:因为在LCD上显示,高度自然就是y方向的像素点数,var.yres;
  • 用点阵实验中的的描点函数lcd_put_pixel替代image数组
    lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);

⑥编译C程序文件freetype_show_font.c
编译命令:arm-linux-gnueabihf-gcc -finput-charset=GBK -fexec-charset=GBK -o freetype_show_font freetype_show_font.c -lfreetype -lm
⑦将编译好的freetype_show_font的文件与simsun.ttc字体文件拷贝至开发板,simsun.ttc字体文件放在freetype_show_font执行文件的上一层目录下,执行以下命令。
执行命令:./freetype_show_font ../simsun.ttc
如果实验成功,我们将看到屏幕中间会比之前实验多出一个蓝色的‘繁’字。
[color=var(--c-text-accent)][size=0.85em]#1.5.3 在LCD上令矢量字体旋转某个角度
在实现显示一个矢量字体后,我们可以添加让该字旋转某个角度的功能。
我们根据输入的第二个参数,判断其旋转角度,主要代码还是参照example1.c
根据上图,增加旋转角度功能,旋转的角度由执行命令的第二个参数指定。
程序文件:freetype_show_font_angle.c
[backcolor=var(--code-bg-color)]                /* use 25 degrees */4894        angle = ( 1.0 * strtoul(argv[2, NULL, 0) / 360 ) * 3.14159 * 2;4895        /* set up matrix */4896        matrix.xx = (FT_Fixed)( cos( angle ) * 0x10000L );4897        matrix.xy = (FT_Fixed)(-sin( angle ) * 0x10000L );4898        matrix.yx = (FT_Fixed)( sin( angle ) * 0x10000L );4899        matrix.yy = (FT_Fixed)( cos( angle ) * 0x10000L );49004901    /* set transformation */4902    FT_Set_Transform( face, &matrix, &pen);
[color=var(--code-ln-color)]












最后编译,在开发板上运行
编译命令如下:
编译命令:arm-linux-gnueabihf-gcc -finput-charset=GBK -fexec-charset=GBK -o freetype_show_font_angle freetype_show_font_angle.c -lfreetype -lm
编译出的文件名为freetype_show_font_angle,将文件拷贝至开发板
在含有该文件的目录下执行以下命令,以下命令正确执行前提是执行文件freetype_show_font在此目录,而且字体文件simsun.ttc,在上一级目录:
执行命令:./freetype_show_font_angle ../simsun.ttc 90
如果实验成功,我们将看到屏幕中间的蓝色‘繁’字,旋转了90度。

使用特权

评论回复

相关帖子

发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则

272

主题

280

帖子

0

粉丝