aleksib 发表于 2024-11-25 11:07

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

## 1.5 搭建freetype相关环境

### 1.5.1 交叉编译freetype，并安装

①解压freetype源文件

```c
tar xjf freetype-2.4.10.tar.bz2
```

②进入解压后的freetype-2.4.10目录

```c
cd freetype-2.4.10
```

③配置freetype-2.4.10

```c
./configure --host=arm-linux-gnueabihf --prefix=/home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/
```

④建个目录，避免后面安装出错提示缺少这个internal目录

```c
mkdir /home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/include/freetype2/freetype/internal -p
```

④编译

```c
make
```

⑤安装

```c
make install
```

⑥移动freetype头文件，避免以后编译总是需要指定头文件路径

```c
mv /home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/include/freetype2/freetype /home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/include/
```

#### 1.5.2 freetype库，头文件移植至开发板

​                由于100ask开发板已经有freetype相关的库和头文件，因此不需要移植，如果开发板没有freetype库和头文件就需要按以下方法移植

/home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/include/* 复制到开发板的头文件目录中

/home/book/100ask_imx6ull-sdk/ToolChain/gcc-linaro-6.2.1-2016.11-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/libc/usr/lib/*so* 复制到开发板的库文件目录中

注：链接文件需要保持它的链接属性（即加-d选项）。

## 1.6 使用freetype

### 1.5.1 矢量字体引入

​                点阵显示英文字母，汉字时，大小固定，如果放大会有锯齿出现，为了解决这个问题，引用矢量字体。

矢量字体形成分三步，若干的关键点，数学曲线（贝塞尔曲线），填充颜色组合而成。

①假设A字母的关键点如图中的黄色圈圈，确定关键点。

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00010.png)

②用数学曲线将关键点都连接起来，成为封闭的曲线。

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00011.png)

③最后把封闭空间填满颜色，就显示出一个A字母。

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00012.png)

​                如果需要放大或者缩小字体，关键点的相对位置是不变的，跟进放大比例放大或缩小，但是相对位置不变，好像分数中的1/2 和 2/4，比例是不变的，但是值却大了，类似这个味道。

### 1.5.2 Freetype理论介绍

​                开源的Freetype字体引擎库它提供统一的接口来访问多种字体格式文件，从而实现矢量字体显示。我们只需要移植这个字体引擎，调用对应的API接口，提供字体关键点，就可以让freetype库帮我们实现闭合曲线，填充颜色，达到显示矢量字体的目的。

关键点（glyph）存在字体文件中，Windows使用的字体文件在FONTS目录下，扩展名为TTF的都是矢量字库，本次使用实验使用的是新宋字体simsun.ttc。

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00013.png)

字体文件结构如上图

​                Charmaps表示字符映射表，字体文件可能支持哪一些编码，GBK，UNICODE，BIG5还是别的编码，如果字体文件支持该编码，跟进编码，通过charmap，找到对应的glyph，一般而言都支持UNICODE码。

有了以上基础，我们想象一个文字的显示过程

- ①给定一个文字吗‘A’（0x41），‘中’（GBK，UNICODE ,BIG5）可以确定它的编码值；
- ②跟进编码值，从枝头文件中通过charmap找到对应的关键点（glyph）；
- ③设置字体大；
- ④用某些函数把关键点（glyph）缩放为我们设置的字体大小；
- ⑤转换为位图点阵
- ⑥在LCD上显示出来

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00014.png)

​                如上图，参照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

### 1.5.2 在LCD上显示一个矢量字体

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00015.png)

我们可以参考上图位置的c程序，编写程序。

①初始化freetype库

程序文件：freetype_show_font.c

```c
4872        error = FT_Init_FreeType( &library );                /* initialize library */
```

②用freetype库中的FT_New_Face函数创建一个face字体文件对象，保存在&face中

程序文件：freetype_show_font.c

```c
4875    error = FT_New_Face( library, argv, 0, &face ); /* create face object */
```

③提取face对象中的glyph，即关键点集

程序文件：freetype_show_font.c

```c
4877    slot = face->glyph;
```

④设置像素点大小，24*24

程序文件：freetype_show_font.c

```c
4879    FT_Set_Pixel_Sizes(face, 24, 0);
```

⑤确定坐标

​                目前我们前面所用的都是LCD的坐标系对应的x与y坐标，然后在freetype上却是使用的笛卡尔坐标系，因此我们还需要转换x与y坐标。

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00017.png)

我们将要显示的是‘繁’字，根据上图可知，先计算在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

```c
4888        pen.x = (var.xres/2 + 8 + 16) * 64;
4889        pen.y = (var.yres/2 - 16) * 64;
4890
4891        /* set transformation */
4892    FT_Set_Transform( face, 0, &pen);
```

⑥找到glyph的位置，然后取出，并转换为位图

```c
4895    error = FT_Load_Char( face, chinese_str, FT_LOAD_RENDER );
4896        if (error)
4897        {
4898                printf("FT_Load_Char error\n");
4899                return -1;
4900        }
```

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00018.png)

FT_Load_Char函数调用替代了上图这3步。

最后把转换出来的位图打印出来，也是参考example1.c编写

程序文件：freetype_show_font.c

```c
4902           draw_bitmap( &slot->bitmap,
4903                         slot->bitmap_left,
4904                       var.yres - slot->bitmap_top);
```

程序文件：example1.c

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00019.png)

修改上图3处位置

- Width宽度：因为在LCD上显示，宽度自然就是x方向的像素点数，var.xres；

- Height高度：因为在LCD上显示，高度自然就是y方向的像素点数，var.yres；

- 用点阵实验中的的描点函数lcd_put_pixel替代image数组

lcd_put_pixel(i, j, bitmap->buffer);



⑥编译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

如果实验成功，我们将看到屏幕中间会比之前实验多出一个蓝色的‘繁’字。

### 1.5.3 在LCD上令矢量字体旋转某个角度

在实现显示一个矢量字体后，我们可以添加让该字旋转某个角度的功能。

我们根据输入的第二个参数，判断其旋转角度，主要代码还是参照example1.c

!(http://photos.100ask.net/NewHomeSite/FramebufferAPP_Image00020.png)

根据上图，增加旋转角度功能，旋转的角度由执行命令的第二个参数指定。

程序文件：freetype_show_font_angle.c

```c
                /* use 25 degrees */
4894        angle = ( 1.0 * strtoul(argv, 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 );
4900
4901    /* set transformation */
4902    FT_Set_Transform( face, &matrix, &pen);
```

最后编译，在开发板上运行

编译命令如下：

编译命令：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度。

Jacktang 发表于 2024-11-26 07:34

<p>在LCD上令矢量字体旋转某个角度这个牛叉，厉害</p>

wangerxian 发表于 2024-11-26 18:41

<p>Freetype有那么些意思，可以做艺术字了。</p>
页: [1]
查看完整版本: 百问LCD Framebuffer应用开发 - freetype搭建与使用