数码相框(五、使用freetype库在LCD显示几行文字)

注：本人已购买韦东山第三期项目视频，内容来源《数码相框项目视频》，只用于学习记录，如有侵权，请联系删除。

1.在LCD显示几行文字

(1) 在LCD显示几行文字，我们分为两种显示方法：
① 从左边起开始显示几行文字；
② 居中显示几行文字。

例如：要显示以下两行文字：
百问网gif
www.100ask.net
注：其中 “百问网gif” 为什么要加一个 “g” 呢？因为字母 “g” 的下半部会超出这行文字的底线。

(2) 从左边显示和居中显示的方法有什么不一样呢？
① 从左边显示：先描画，再算出边框：如下图所示矩形框是LCD显示屏，第一行显示 “百问网gif”，第二行显示“www.100ask.net”。那么显示完第一行后，从哪里开始显示第二行呢？那么第二行文字从下图第一个箭头所指的红色水平线开始显示，还是从第二个箭头所指的红色水平线开始显示？显然，为了避免第二行文字覆盖第一行文字产生重叠，第二行文字应该从第二个箭头所指的红色水平线开始显示。因此，描画完上一行文字后，需要算出该行文字的边框，以便下一行文字显示。

② 居中显示：先算出边框，再确定坐标并描画：如下图所示，第一行居中显示 “百问网gif”，第二行居中显示 “www.100ask.net”。那么如何居中显示呢？说先需要知道整行文字的长度，才能确定文字从哪里开始显示。所以，居中显示文字，需要先算出整行文的边框，再确定显示的起始坐标并描画文字。

(3) 从左边显示几行文字分析：
① 假设我们从LCD坐标系的（0，24）开始显示第一行文字，根据前面所讲的需要算出第一行文字的边框，然后根据第一行文字的高度最大高度(line_box_ymax - line_box_ymin)，确定第二行文字显示的起始坐标。我们把显示的字体大小设置为24，设第一行文字的字体高度为High，那么High = line_box_ymax - line_box_ymin，第二行文字的大小为24，那么显示的起始坐标为（0，High + 24），即（0，line_box_ymax - line_box_ymin + 24）。

② 显示上图两行文字的代码如下：

/******************************************** 使用 freetype 显示多行文字*******************************************/
#include <stdio.h>
#include <string.h>
#include <math.h>
#include <wchar.h>
#include <linux/fb.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <sys/mman.h>#include <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_Hint 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;/** @brief         在LCD指定位置显示指定的颜色** @param[in]     x   预显示位置的横坐标** @param[in]     y   预显示位置的纵坐标** @param[in]     color 预显示的颜色** @return        无** @note          颜色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; /*对于8BPP：color 为调色板的索引值，其颜色取决于调色板的数值*/case 16:{red   = (color >> 16) & 0xff;green = (color >> 8)  & 0xff;blue  = (color >> 0)  & 0xff;color = ((red >> 3) << 11) | ((green >> 2) << 5) | (blue >> 3); /*格式：RGB565*/*pen_16 = color;break;}case 32: *pen_32 = color;break;default: printf("can't surport %dbpp",var.bits_per_pixel);break;}
}/* Replace this function with something useful. */
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;for ( i = x, p = 0; i < x_max; i++, p++ ){for ( j = y, q = 0; j < y_max; j++, q++ ){if ( i < 0      || j < 0       ||i >= var.xres || j >= var.yres )continue;lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);   }}
}int main(int argc, char **argv)
{wchar_t *wstr1 = L"百问网gif";wchar_t *wstr2 = L"www.100ask.net";FT_Library library;FT_Face face;FT_GlyphSlot slot;FT_Glyph glyph;FT_BBox bbox;FT_Vector pen;FT_Error error;int i;int line_box_ymin = 10000;int line_box_ymax = 0;if (argc != 2){printf("Usage : %s <font_file>\n", argv[0]);return -1;  }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);/* 操作矢量字体 *//* 1.初始化库 */error = FT_Init_FreeType(&library);/* 2.打开字体文件 */error = FT_New_Face(library, argv[1], 0, &face); slot = face->glyph;/* 3.设置字体大小 */FT_Set_Pixel_Sizes(face, 24, 0);/* 4.确定坐标:* lcd_x = 0;* lcd_y = 24;* 笛卡尔坐标系：* x = lcd_x;* y = var.yres - lcd_y = var.yres - 24;*/pen.x = 0 * 64;pen.y = (var.yres - 24) * 64;for (i = 0; i < wcslen(wstr1); i++){FT_Set_Transform(face, 0, &pen);error = FT_Load_Char(face, wstr1[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}error = FT_Get_Glyph(face->glyph, &glyph);if (error){printf("FT_Get_Glyph error\n");return -1;}FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &bbox);/* 计算第一行文字的高度 */if (line_box_ymin > bbox.yMin)line_box_ymin = bbox.yMin;if (line_box_ymax < bbox.yMax)line_box_ymax = bbox.yMax;draw_bitmap(&slot->bitmap,slot->bitmap_left,var.yres - slot->bitmap_top);pen.x += slot->advance.x;}/* 5.确定第二行文字的显示坐标：* lcd_x = 0;* lcd_y = line_box_ymax - line_box_ymin + 24* 笛卡尔坐标系：* x = 0 * 64;* y = var.yres - lcd_y = (var.yres - (line_box_ymax - line_box_ymin + 24))*/pen.x = 0 * 64;pen.y = (var.yres - (line_box_ymax - line_box_ymin + 24)) * 64;for (i = 0; i < wcslen(wstr2); i++){FT_Set_Transform(face, 0, &pen);error = FT_Load_Char(face, wstr2[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}draw_bitmap(&slot->bitmap,slot->bitmap_left,var.yres - slot->bitmap_top);pen.x += slot->advance.x;}return 0;
}

③ 编译程序

arm-linux-gcc -o show_more_lines show_more_lines.c -lfreetype

④ 把编译好的程序拷贝到开发板并执行./show_more_lines simsun.ttc，显示效果如下图所示：

(4) 居中显示几行文字
前讲过想居中显示几行文字，需要先把一行文字的长宽算出来，然后再确定显示该行文字的起始原点坐标，并描绘文字。那么我么要怎么做呢？我们可以参考freetype的文档：https://www.freetype.org/freetype2/docs/tutorial/step2.html 的《II. Managing Glyphs》章节。在从左边显示几行文字的代码基础上，在main函数中，对freeytpe的操作只保留初始化库、打开字体文件、设置字体大小，然后参考freeytype文档《II. Managing Glyphs》章节编写代码。

① 首先定义TGlyph_ 结构体：

typedef struct  TGlyph_
{FT_UInt    index;  /* glyph index                  */FT_Vector  pos;    /* glyph origin on the baseline */FT_Glyph   image;  /* glyph image                  */} TGlyph, *PGlyph;

② 在main函数定义全局变量：

TGlyph        glyphs[MAX_GLYPHS];  /* glyphs table 数组*/    /* MAX_GLYPHS暂且定义为100 */
FT_UInt       num_glyphs;

③ 从字符里面获得glyphs，代码如下：

int Get_Glyph_Frm_Wstr(FT_Face face, wchar_t *wstr, TGlyph glyphs[])
{int n;PGlyph glyph = glyphs;FT_Error error;FT_GlyphSlot slot = face->glyph;/* 先假设字符串从笛卡尔坐标 (0,0)         开始描画,以便于获得字体的宽度     */int pen_x = 0;int pen_y = 0;for (n = 0; n < wcslen(wstr); n++){/* 根据 wstr[n] 字符的Unicode码, 获得Glyph的索引            */glyph->index = FT_Get_Char_Index( face, wstr[n] );/* store current pen position */glyph->pos.x = pen_x;glyph->pos.y = pen_y;/* 从字体文件里根据Glyph的索引把Glyph加载出来,* load时是把glyph放入插槽face->glyph,每执行一次for循环face->glyph会被覆盖*/error = FT_Load_Glyph(face, glyph->index, FT_LOAD_DEFAULT);if ( error ) continue;/* 为什么要Get Glyph? 因为执行一次for循环, 插槽face->glyph会被覆盖, * 所以需要把face->glyph拷贝出来, 保存到数组glyphs[]的image成员里*/error = FT_Get_Glyph(face->glyph, &glyph->image);if ( error ) continue;/* translate the glyph image now *//* 为什么要设置转换? 因为这使得glyph->image含有位置信息*/FT_Glyph_Transform(glyph->image, 0, &glyph->pos);pen_x   += slot->advance.x; /* 单位为 1/64 piont*/glyph++; /* 指向下一个glyphs*/}return (glyph - glyphs); /* 返回glyph的个数 */
}

④ 计算字符串的边框(长度、宽度)：

void  compute_string_bbox(TGlyph glyphs[], FT_UInt num_glyphs, FT_BBox *abbox)
{  FT_BBox  bbox;int n;bbox.xMin = bbox.yMin =  32000;bbox.xMax = bbox.yMax = -32000;for ( n = 0; n < num_glyphs; n++ ){FT_BBox  glyph_bbox;/* 取出每个字符的CBOX，确定其方框* FT_GLYPH_BBOX_TRUNCATE 表示取得单位是像素，比较方便*/FT_Glyph_Get_CBox(glyphs[n].image, 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;}/* 计算结束,返回字符串的边框 */*abbox = bbox;
}

⑤ 描绘字符串

void Draw_Glyphs(TGlyph glyphs[], FT_UInt num_glyphs, FT_Vector pen)
{int n;FT_Error error;for (n = 0; n < num_glyphs; n++){FT_Glyph_Transform(glyphs[n].image, 0, &pen);/* convert glyph image to bitmap (destroy the glyph copy!) */error = FT_Glyph_To_Bitmap(&glyphs[n].image, FT_RENDER_MODE_NORMAL, 0, /* no additional translation */1);  /* destroy copy in "image" */if ( !error ){/* 获取位图 */FT_BitmapGlyph    bit = (FT_BitmapGlyph)glyphs[n].image;draw_bitmap(&bit->bitmap, bit->left, var.yres - bit->top );FT_Done_Glyph(glyphs[n].image);}}
}

⑥ 完整代码如下：

/******************************************** 使用 freetype 居中显示文字*******************************************/
#include <stdio.h>
#include <string.h>
#include <math.h>
#include <wchar.h>
#include <linux/fb.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <sys/mman.h>#include <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H#define MAX_GLYPHS 100typedef struct  TGlyph_
{FT_UInt    index;  /* glyph index                  */FT_Vector  pos;    /* glyph origin on the baseline */FT_Glyph   image;  /* glyph image                  */} TGlyph, *PGlyph;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;/** @brief         在LCD指定位置显示指定的颜色** @param[in]     x   预显示位置的横坐标** @param[in]     y   预显示位置的纵坐标** @param[in]     color 预显示的颜色** @return        无** @note          颜色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; /*对于8BPP：color 为调色板的索引值，其颜色取决于调色板的数值*/case 16:{red   = (color >> 16) & 0xff;green = (color >> 8)  & 0xff;blue  = (color >> 0)  & 0xff;color = ((red >> 3) << 11) | ((green >> 2) << 5) | (blue >> 3); /*格式：RGB565*/*pen_16 = color;break;}case 32: *pen_32 = color;break;default: printf("can't surport %dbpp",var.bits_per_pixel);break;}
}/* Replace this function with something useful. */
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;for ( i = x, p = 0; i < x_max; i++, p++ ){for ( j = y, q = 0; j < y_max; j++, q++ ){if ( i < 0      || j < 0       ||i >= var.xres || j >= var.yres )continue;lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);   }}
}int Get_Glyph_Frm_Wstr(FT_Face face, wchar_t *wstr, TGlyph glyphs[])
{...
}void  compute_string_bbox(TGlyph         glyphs[], FT_UInt num_glyphs, FT_BBox *abbox)
{  ...
}void Draw_Glyphs(TGlyph glyphs[], FT_UInt num_glyphs, FT_Vector pen)
{...
}int main(int argc, char **argv)
{wchar_t *wstr1 = L"百问网gif";wchar_t *wstr2 = L"www.100ask.net";FT_Library library;FT_Face face;FT_Vector pen;FT_GlyphSlot slot;TGlyph        glyphs[MAX_GLYPHS];  /* glyphs table 数组*/    /* MAX_GLYPHS暂且定义为100 */FT_UInt       num_glyphs;FT_BBox bbox;FT_Error error;int line_box_ymin = 10000;int line_box_ymax = 0;int line_box_width;int line_box_heigh;if (argc != 2){printf("Usage : %s <font_file>\n", argv[0]);return -1; }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);/* 操作矢量字体 *//* 1.初始化库 */error = FT_Init_FreeType(&library);/* 2.打开字体文件 */error = FT_New_Face(library, argv[1], 0, &face); slot = face->glyph;/* 3.设置字体大小 */FT_Set_Pixel_Sizes(face, 24, 0);/* 获取字符串的glyph、glyph的个数 */num_glyphs = Get_Glyph_Frm_Wstr(face, wstr1, glyphs);compute_string_bbox(glyphs, num_glyphs, &bbox);/* 计算字符串的宽度、高度 */line_box_width = bbox.xMax - bbox.xMin;line_box_heigh = bbox.yMax - bbox.yMin;/* 根据字符串的宽度和高度确定字符串的起始坐标 */pen.x = (var.xres - line_box_width) / 2 * 64;pen.y = (var.yres - line_box_heigh) / 2 * 64;/* 在LCD描绘字符串 */Draw_Glyphs(glyphs, num_glyphs, pen);/* 对第二个字符串进行同样的处理 */num_glyphs = Get_Glyph_Frm_Wstr(face, wstr2, glyphs);compute_string_bbox(glyphs, num_glyphs, &bbox);line_box_width = bbox.xMax - bbox.xMin;line_box_heigh = bbox.yMax - bbox.yMin;pen.x = (var.xres - line_box_width) / 2 * 64;pen.y = pen.y - 24 * 64;Draw_Glyphs(glyphs, num_glyphs, pen);return 0;
}

⑦ 编译程序拷贝到开发板，执行./show_center_lines simsun.ttc，显示效果如下：

数码相框(五、使用freetype库在LCD显示几行文字)相关推荐

数码相框在LCD上显示多行文字（6）
数码相框在LCD上显示多行文字(6) 目的: 1.从左边起显示几行文字 2.居中显示几行文字在LCD上显示下列两行文字: 我是程序员gif Hello World 分析: 1.从左边起显示几行文字 ...
LINUX学习-在LCD上显示多行文字
本节主要实现的功能是在lcd上显示两行文字. 主要实现了两种 1.靠左侧上方显示 2.居中显示两种的实现方法大同小异,主要的不同实在确定描字符时的源点. 一.靠左显示时,确定源点的方法显示第一行文 ...
光标选中多行_朋友圈发纯文字显示多行文字的技巧
点击上面"妙奇趣"免费关注经常在朋友圈看到很多人发纯文字朋友圈只显示一行文字,小编觉得一条重要的消息如果只显示一行,首先在眼花缭乱的朋友圈内容里不能给读者很醒目的显示出来,其次就 ...
3.数码相框-通过freetype库实现矢量显示
本章主要内容如下: 1)矢量字体原理 2)使用freetype库实现矢量字体显示 1. 矢量字体原理将汉字的笔划边缘用直线段描述成封闭的曲线,并将线段各端点的坐标经压缩存储,如下图所示: 由于每个汉 ...
LVGL7.11中使用freetype库加载显示字体
目录 1.使用环境 2.关于freetype库 3.编译freetype-2.10.4 4.下载LVGL官方封装的接口lv_lib_freetype 5.在mian.c中添加测试代码 1.使用环境硬 ...
限制p元素之显示2行文字，同时出现省略号。
只需要给p元素添加属性即可,之前找了很多都不行 css代码: p { border: 1px solid #ccc; overflow: hidden; display: -webkit-box; - ...
word 图片右边显示多行文字
选择要插入图片的文档xxx.docx 点击图片(或者选择图片工具)----->点击环绕--->下拉选择紧密型环绕
数码相框(四、使用freetype库实现矢量字体显示)
注:本人已购买韦东山第三期项目视频,内容来源<数码相框项目视频>.数码相框-通过freetype库实现矢量显示,只用于学习记录,如有侵权,请联系删除. 在数码相框(三.LCD显示文 ...
【Arduino实验12 1602 LCD显示】
目录一.实验目的二.实验设备与环境三.实验重点四.实验难点五.实验内容 5.1实验任务 5.2实验原理 5.3实验内容 5.4实验结果 5.5思考题一.实验目的 (1)熟悉1602LCD液 ...

数码相框(五、使用freetype库在LCD显示几行文字)

1.在LCD显示几行文字

数码相框(五、使用freetype库在LCD显示几行文字)相关推荐

最新文章

热门文章