文章目录
- 使用freetype 显示一个文字
- 使用 freetype 显示一行文字
- 了解笛卡尔坐标系
- 每个字符的大小可能不同
- 怎么在指定位置显示一行文字
- freetype 的几个重要数据结构
- 1、**FT_Library**结构体
- 2、FT_Face结构体
- 3、FT_GlyphSlot结构体
- 4、FT_Glyph结构体
- 5、FT_BBox结构体
- 读懂显示一行字体的代码
- draw函数
- 第一步
- 第二步:计算外框
- 第三步:调整坐标
- 第四步: 转换、加载位图、绘制
- 第五步:上机实验
使用freetype 显示一个文字
之前学习Framebuffer的时候,把它和Framebuffer写在了一起,可以看看我写的这个文章:显示一个文字
使用 freetype 显示一行文字
了解笛卡尔坐标系
在 LCD 的坐标系中,原点在屏幕的左上角。对于笛卡尔坐标系,原点在左下角。freetype 使用笛卡尔坐标系,在显示时需要转换为 LCD 坐标系。
V:纵向总像素个数
从图可知,X 方向坐标值是一样的。
在 Y 方向坐标值需要换算,假设 LCD 的高度是 V。
在 LCD 坐标系中坐标是(x, y),那么它在笛卡尔坐标系中的坐标值为(x, V-y)。
反过来也是一样的,在笛卡尔坐标系中坐标是(x, y),那么它在 LCD 坐标系中坐标值为(x, V-y)。
每个字符的大小可能不同
在使用 FT_Set_Pixel_Sizes 函数设置字体大小时,这只是“期望值”。比如“百问网 www.100ask.net”,如果把“.”显示得跟其他汉字一样大,不好看。
所以在显示一行文字时,后面文字的位置会受到前面文字的影响。
例:
幸好,freetype 帮我们考虑到了这些影响。
对于 freetype 字体的尺寸(freetype Metrics),需要参考图:
在显示一行文字时,这些文字会基于同一个基线来绘制位图:baseline。
在 baseline 上,每一个字符都有它的原点(origin),比如上图中 baseline左边的黑色圆点就是字母“g”的原点。当前 origin 加上 advance 就可以得到下一个字符的 origin,比如上图中 baseline 右边的黑色圆点。在显示一行中多个文件字时,后一个文字的原点依赖于前一个文字的原点及 advance。
有图可得:
origin + advance = origin(下一个字的)
字符的位图是有可能越过 baseline 的,比如上图中字母“g”在 baseline下方还有像。
上图中红色方框内就是字母“g”所点据的位图,它的四个角落不一定与原点
重合。
上图中那些 xMin 、 xMax 、 yMin 、 yMax 如 何 获 得 ? 可 以 使 用
FT_Glyph_Get_CBox 函数获得一个字体的这些参数,将会保存在一个 FT_BBox结构体中,以后想计算一行文字的外框时要用到图这些信息:
更多结构体后面会详细说明!!
怎么在指定位置显示一行文字
要显示一行文字时,每一个字符都有自己外框:xMin、xMax、yMin、yMax。把这些字符的 xMin、yMin 中的最小值取出来,把这些字符的 xMax、yMax 中的最大值取出来,就可以确定这行文字的外框了。
要想在指定位置(x, y)显示一行文字,步骤如图所示:
第1步 先指定第 1 个字符的原点 pen 坐标为(0, 0),计算出它的外框
第2步 再计算右边字符的原点,也计算出它的外框
把所有字符都处理完后就可以得到一行文字的整体外框:假设外框左上角坐标为(x’, y’)。
第3步 想在(x, y)处显示这行文字,调整一下 pen 坐标即可。怎么调整?
pen 为(0, 0)时对应左上角(x’, y’);那么左上角为(x, y)时就可以算出pen 为(x-x’, y-y’)。
freetype 的几个重要数据结构
1、FT_Library结构体
对应 freetype 库,使用 freetype 之前要先调用以下代码:
FT_Library library; /* 对应 freetype 库 */
error = FT_Init_FreeType( &library ); /* 初始化 freetype 库 */
2、FT_Face结构体
它对应一个矢量字体文件,在源码中使用 FT_New_Face 函数打开字体文件后,就可以得到一个 FT_Face结构体face。
为什么称之为 face?
估计是文字都是写在二维平面上的吧,正对着人脸?不用管原因了,总之认为它对应一个字体文件就可以。
代码如下:
error = FT_New_Face(library, font_file, 0, &face ); /* 加载字体文件 */
3、FT_GlyphSlot结构体
插槽?用来保存字符的处理结果:比如转换后的 glyph、位图,如图:
上一个说的FT_Face结构体里面成员有一个FT_GlyphSlot结构体,里面保存的是字符的处理结果(含有变换后的glyph、位图、advance等信息)
一个 face 中有很多字符,生成一个字符的点阵位图时,位图保存在哪里?
保存在插槽中:face->glyph
生成第 1 个字符位图时,它保存在 face->glyph 中;生成第 2 个字符位图时,也会保存在 face->glyph 中,会覆盖第 1 个字符的位图。
所以我们生成后要及时取走,防止覆盖!
使用当中我们通常会定义一个变量来保存:
FT_GlyphSlot slot = face->glyph; / 插槽: 字体的处理结果保存在这里 /
4、FT_Glyph结构体
字体文件中保存有字符的原始关键点信息,使用 freetype 的函数可以放大、缩小、旋转,这些新的关键点保存在插槽中(注意:位图也是保存在插槽中)。
新的关键点使用 FT_Glyph 来表示,可以使用这样的代码从 slot 中获得glyph:
error = FT_Get_Glyph(slot , &glyph);
5、FT_BBox结构体
FT_BBox 结构体定义如下,它表示一个字符的外框,即新 glyph 的外框:
可以使用以下代码从 glyph 中获得这些信息:
FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &bbox );
读懂显示一行字体的代码
学习了上面的一堆基础知识,我们就懂了步骤:
第1步 先指定第 1 个字符的原点 pen 坐标为(0, 0),计算出它的外框
第2步 再计算右边字符的原点,也计算出它的外框
把所有字符都处理完后就可以得到一行文字的整体外框:假设外框左上角坐标为(x’, y’)。
第3步 想在(x, y)处显示这行文字,调整一下 pen 坐标即可。怎么调整?
pen 为(0, 0)时对应左上角(x’, y’);那么左上角为(x, y)时就可以算出pen 为(x-x’, y-y’)。
第4步 转换、加载位图、绘制一个字符,计算下一个字符origin,继续绘制下一个字符…依次循环
完整的代码如下:
#include <sys/mman.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <unistd.h>
#include <linux/fb.h>
#include <fcntl.h>
#include <stdio.h>
#include <string.h>
#include <math.h>
#include <wchar.h>
#include <sys/ioctl.h>
#include <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H
int fd_fb;
struct fb_var_screeninfo var; /* Current var */
struct fb_fix_screeninfo fix; /* Current fix */
int screen_size;
unsigned char *fbmem;
unsigned int line_width;
unsigned int pixel_width;
/* color : 0x00RRGGBB */
void lcd_put_pixel(int x, int y, unsigned int color)
{
unsigned char *pen_8 = fbmem+y*line_width+x*pixel_width;
unsigned short *pen_16;
unsigned int *pen_32;
unsigned int red, green, blue;
pen_16 = (unsigned short *)pen_8;
pen_32 = (unsigned int *)pen_8;
switch (var.bits_per_pixel)
{
case 8:
{
*pen_8 = color;
break;
}
case 16:
{
/* 565 */
red = (color >> 16) & 0xff;
green = (color >> 8) & 0xff;
blue = (color >> 0) & 0xff;
color = ((red >> 3) << 11) | ((green >> 2) << 5) | (blue >> 3);
*pen_16 = color;
break;
}
case 32:
{
*pen_32 = color;
break;
}
default:
{
printf("can't surport %dbpp\n", var.bits_per_pixel);
break;
}
}
}
/**********************************************************************
* 函数名称: draw_bitmap
* 功能描述: 根据bitmap位图,在LCD指定位置显示汉字
* 输入参数: x坐标,y坐标,位图指针
* 输出参数: 无
* 返 回 值: 无
* 修改日期 版本号 修改人 修改内容
* -----------------------------------------------
* 2020/05/12 V1.0 zh(angenao) 创建
***********************************************************************/
/* 在LCD上绘制: 使用LCD坐标 */
void
draw_bitmap( FT_Bitmap* bitmap,
FT_Int x,
FT_Int y)
{
FT_Int i, j, p, q;
FT_Int x_max = x + bitmap->width;
FT_Int y_max = y + bitmap->rows;
//printf("x = %d, y = %d\n", x, y);
for ( j = y, q = 0; j < y_max; j++, q++ )
{
for ( i = x, p = 0; i < x_max; i++, p++ )
{
if ( i < 0 || j < 0 ||
i >= var.xres || j >= var.yres )
continue;
//image[j][i] |= bitmap->buffer[q * bitmap->width + p];
lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);
}
}
}
/* 计算一行文字的外框 */
int compute_string_bbox(FT_Face face, wchar_t *wstr, FT_BBox *abbox)
{
/* FT_Face face : 对应一个字体文件 */
int i; //用于for循环计算次数
int error; //用于保存函数返回值
FT_BBox bbox; //初始外框
FT_BBox glyph_bbox;//用来保存新加载的外框(从glyph得到外框: bbox)
FT_Vector pen; //定义原点
FT_Glyph glyph; //用于保存字体文件
FT_GlyphSlot slot = face->glyph;/* 插槽: 字体的处理结果保存在这里 */
/* 初始化 */
bbox.xMin = bbox.yMin = 32000;
bbox.xMax = bbox.yMax = -32000;
/* 指定原点为(0, 0) */
pen.x = 0;
pen.y = 0;
/* 计算每个字符的bounding box */
/* 先translate, 再load char, 就可以得到它的外框了 */
for (i = 0; i < wcslen(wstr); i++)
{
/* 转换:transformation */
FT_Set_Transform(face, 0, &pen);
/* 加载位图: 一个字一个字得去加载位图 会保存在face里面 */
error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);
if (error)
{
printf("FT_Load_Char error\n");
return -1;
}
/* 在face结构体里面取出新的关键点保存在变量glyph里(从 slot 中获得glyph) */
error = FT_Get_Glyph(face->glyph, &glyph);
if (error)
{
printf("FT_Get_Glyph error!\n");
return -1;
}
/* 从glyph得到外框: bbox,然后保存在变量glyph_bbox中 */
FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &glyph_bbox);
/* 更新外框 */
if ( glyph_bbox.xMin < bbox.xMin )
bbox.xMin = glyph_bbox.xMin;
if ( glyph_bbox.yMin < bbox.yMin )
bbox.yMin = glyph_bbox.yMin;
if ( glyph_bbox.xMax > bbox.xMax )
bbox.xMax = glyph_bbox.xMax;
if ( glyph_bbox.yMax > bbox.yMax )
bbox.yMax = glyph_bbox.yMax;
/* 计算下一个字符的原点: increment pen position */
pen.x += slot->advance.x;
pen.y += slot->advance.y;
}
/* return string bbox */
*abbox = bbox;//保存结果
}
/* 调整原点并绘制 */
int display_string(FT_Face face, wchar_t *wstr, int lcd_x, int lcd_y)
{
int i;
int error;
FT_BBox bbox;
FT_Vector pen;
FT_Glyph glyph;
FT_GlyphSlot slot = face->glyph;
/* 把LCD坐标转换为笛卡尔坐标 */
int x = lcd_x;
int y = var.yres - lcd_y;
/* 计算外框 */
compute_string_bbox(face, wstr, &bbox);
/* 反推原点 */
pen.x = (x - bbox.xMin) * 64; /* 单位: 1/64像素 */
pen.y = (y - bbox.yMax) * 64; /* 单位: 1/64像素 */
/* 处理每个字符 */
for (i = 0; i < wcslen(wstr); i++)
{
/* 转换:transformation */
FT_Set_Transform(face, 0, &pen);
/* 加载位图: load glyph image into the slot (erase previous one) */
error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);
if (error)
{
printf("FT_Load_Char error\n");
return -1;
}
/* 在LCD上绘制: 使用LCD坐标 */
draw_bitmap( &slot->bitmap,
slot->bitmap_left,
var.yres - slot->bitmap_top);
/* 计算下一个字符的原点: increment pen position */
pen.x += slot->advance.x;
pen.y += slot->advance.y;
}
return 0;
}
int main(int argc, char **argv)
{
wchar_t *wstr = L"百问网www.100ask.net";
FT_Library library;
FT_Face face;
int error;
FT_BBox bbox;
int font_size = 24;
int lcd_x, lcd_y;
if (argc < 4)
{
printf("Usage : %s <font_file> <lcd_x> <lcd_y> [font_size]\n", argv[0]);
return -1;
}
lcd_x = strtoul(argv[2], NULL, 0);//将输入的X坐标转换成想要的形式
lcd_y = strtoul(argv[3], NULL, 0);//将输入的Y坐标转换成想要的形式
if (argc == 5)
font_size = strtoul(argv[4], NULL, 0);//将输入的字体大小转换成想要的形式
fd_fb = open("/dev/fb0", O_RDWR);//打开设备节点
if (fd_fb < 0)
{
printf("can't open /dev/fb0\n");
return -1;
}
if (ioctl(fd_fb, FBIOGET_VSCREENINFO, &var))
{
printf("can't get var\n");
return -1;
}
if (ioctl(fd_fb, FBIOGET_FSCREENINFO, &fix))
{
printf("can't get fix\n");
return -1;
}
line_width = var.xres * var.bits_per_pixel / 8;
pixel_width = var.bits_per_pixel / 8;
screen_size = var.xres * var.yres * var.bits_per_pixel / 8;
fbmem = (unsigned char *)mmap(NULL , screen_size, PROT_READ | PROT_WRITE, MAP_SHARED, fd_fb, 0);
if (fbmem == (unsigned char *)-1)
{
printf("can't mmap\n");
return -1;
}
/* 清屏: 全部设为黑色 */
memset(fbmem, 0, screen_size);
error = FT_Init_FreeType( &library ); /* 初始化 freetype 库 */
error = FT_New_Face( library, argv[1], 0, &face ); /* 加载字体文件 */
FT_Set_Pixel_Sizes(face, font_size, 0); /* 设置字体大小 */
display_string(face, wstr, lcd_x, lcd_y); /* */
return 0;
}
draw函数
void draw_bitmap( FT_Bitmap* bitmap, FT_Int x, FT_Int y)
{
FT_Int i, j, p, q;
FT_Int x_max = x + bitmap->width;
FT_Int y_max = y + bitmap->rows;
//printf("x = %d, y = %d\n", x, y);
for ( j = y, q = 0; j < y_max; j++, q++ )
{
for ( i = x, p = 0; i < x_max; i++, p++ )
{
if ( i < 0 || j < 0 ||
i >= var.xres || j >= var.yres )
continue;
//image[j][i] |= bitmap->buffer[q * bitmap->width + p];
lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);
}
}
}
第一步
第二步:计算外框
/* 计算一行文字的外框 */
int compute_string_bbox(FT_Face face, wchar_t *wstr, FT_BBox *abbox)
{
/* FT_Face face : 对应一个字体文件 */
int i; //用于for循环计算次数
int error; //用于保存函数返回值
FT_BBox bbox; //初始外框
FT_BBox glyph_bbox;//用来保存新加载的外框(从glyph得到外框: bbox)
FT_Vector pen; //定义原点
FT_Glyph glyph; //用于保存字体文件
FT_GlyphSlot slot = face->glyph;/* 插槽: 字体的处理结果保存在这里 */
/* 初始化 */
bbox.xMin = bbox.yMin = 32000;
bbox.xMax = bbox.yMax = -32000;
/* 指定原点为(0, 0) */
pen.x = 0;
pen.y = 0;
/* 计算每个字符的bounding box */
/* 先translate, 再load char, 就可以得到它的外框了 */
for (i = 0; i < wcslen(wstr); i++)
{
/* 转换:transformation */
FT_Set_Transform(face, 0, &pen);
/* 加载位图: 一个字一个字得去加载位图 会保存在face里面 */
error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);
if (error)
{
printf("FT_Load_Char error\n");
return -1;
}
/* 在face结构体里面取出新的关键点保存在变量glyph里(从 slot 中获得glyph) */
error = FT_Get_Glyph(face->glyph, &glyph);
if (error)
{
printf("FT_Get_Glyph error!\n");
return -1;
}
/* 从glyph得到外框: bbox,然后保存在变量glyph_bbox中 */
FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &glyph_bbox);
/* 更新外框 */
if ( glyph_bbox.xMin < bbox.xMin )
bbox.xMin = glyph_bbox.xMin;
if ( glyph_bbox.yMin < bbox.yMin )
bbox.yMin = glyph_bbox.yMin;
if ( glyph_bbox.xMax > bbox.xMax )
bbox.xMax = glyph_bbox.xMax;
if ( glyph_bbox.yMax > bbox.yMax )
bbox.yMax = glyph_bbox.yMax;
/* 计算下一个字符的原点: increment pen position */
pen.x += slot->advance.x;
pen.y += slot->advance.y;
}
/* return string bbox */
*abbox = bbox;//保存结果
}
第三步:调整坐标
第四步: 转换、加载位图、绘制
/* 调整原点并绘制 */
int display_string(FT_Face face, wchar_t *wstr, int lcd_x, int lcd_y)
{
int i;
int error;
FT_BBox bbox;
FT_Vector pen;
FT_Glyph glyph;
FT_GlyphSlot slot = face->glyph;
/* 把LCD坐标转换为笛卡尔坐标 */
int x = lcd_x;
int y = var.yres - lcd_y;
/* 计算外框 */
compute_string_bbox(face, wstr, &bbox);
/* 反推原点 */
pen.x = (x - bbox.xMin) * 64; /* 单位: 1/64像素 */
pen.y = (y - bbox.yMax) * 64; /* 单位: 1/64像素 */
/* 处理每个字符 */
for (i = 0; i < wcslen(wstr); i++)
{
/* 转换:transformation */
FT_Set_Transform(face, 0, &pen);
/* 加载位图: load glyph image into the slot (erase previous one) */
error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);
if (error)
{
printf("FT_Load_Char error\n");
return -1;
}
/* 在LCD上绘制: 使用LCD坐标 */
draw_bitmap( &slot->bitmap,
slot->bitmap_left,
var.yres - slot->bitmap_top);
/* 计算下一个字符的原点: increment pen position */
pen.x += slot->advance.x;
pen.y += slot->advance.y;
}
return 0;
}