數碼相框 在LCD上顯示多行文字（6）

目的：

1、從左邊起顯示幾行文字

2、居中顯示幾行文字

在LCD上顯示下列兩行文字：

我是程式設計師gif

Hello World

分析：

1、從左邊起顯示幾行文字

（1）先描畫字型

（2）然後算出邊框

定義兩個標誌變數：line_box_ymax和line_box_ymin

通過FT_Glyph_Get_CBox()測量字形圖象，獲取一行文字的yMax，Min最大值，最小值。

顯示第一行時：

pen.x = 0*64; //單位是64分之一畫素
 

顯示第2~n行時：

pen.y = (var.yres - 24) * 64; //fb_var.yres：LCD總高度，原點為(0, 24)

2、居中顯示幾行文字

（1）先算出邊框（知道起點，長、寬）

（2）再確定座標並描畫

程式碼中的一些變數解釋：

bbox:是每個字型檔案在x和y方向最大值和最小值的結構體

face:字型檔案

pen:原點和位置

從左顯示多行24X24文字

內容如下：

定義：某一行的BBox的y最小值line_box_ymin和最大值line_box_ymax

通過函式FT_Glyph_Get_CBox()測量字型圖象，從glyph得到BBox，BBox含有每個文字的xMin，xMax，yMin，yMax，獲取一行文字的yMax,Min最大值和最小值。

從左起顯示幾行文字程式碼如下：

#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 <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;
		}
	}
}

/* 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;


	//printf("x = %d, y = %d\n", x, y);

	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;

		  //image[j][i] |= bitmap->buffer[q * bitmap->width + p];
		  //輸出函式，因為buffer是一個位元組，而lcd_put_pixel()是0x00RRGGBB,所以打印出來的是藍色字型
		  lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);//引數:x座標，y座標，顏色值
		}
	}
}

int main(int argc, char **argv)
{
	wchar_t *wstr1 = L"我是程式設計師gif";
	wchar_t *wstr2 = L"Hello World";
	
	FT_Library    library;
	FT_Face       face;
	int error;
	FT_Vector     pen;                    /* untransformed origin  */
	FT_GlyphSlot  slot;
	int i;
	//方框
	FT_BBox bbox;
	FT_Glyph  glyph;

	//某一行的BBox的y最小值和最大值
	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);//開啟LCD
	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;
	}

	//記錄LCD的引數
	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);

	/* 顯示向量字型，把show_font和example2兩個合在一起 */
	error = FT_Init_FreeType( &library );              /* 初始化freetype庫 */
	/* error handling omitted */

	//裝載字型檔案
	error = FT_New_Face( library, argv[1], 0, &face ); /* 開啟一個字型檔案 */
	/* error handling omitted */

	//每得到一個face，都會有一個slot插槽，插槽就是裝載一個字型裡面的資料
	//每載入一個文字，插槽slot就會變換一下，裡面的資料時最新的
	slot = face->glyph;

	//設定字型的大小24X24
	FT_Set_Pixel_Sizes(face, 24, 0);



	/* 確定座標: A中\向量字型\
        * lcd_x = 0
        * lcd_y = 24
        * 轉換為笛卡爾座標系:
        * x = lcd_x = 0
        * y = var.yres - lcd_y = var.yres/2 - 24
	  */
	//pen就是向量字型的位置
	//第一個字元的原點“我”
	pen.x = 0 * 64;//單位是64分之一畫素
	pen.y = (var.yres - 24) * 64;

	for (i = 0; i < wcslen(wstr1); i++)
	{
		/* 設定轉換方法 */
		FT_Set_Transform( face, 0, &pen );//設定轉換矩陣matrix，轉換引數,0表示不旋轉

		/* load glyph image into the slot (erase previous one) */
		//FT_LOAD_RENDER引數會把glyph向量檔案轉換為點陣圖
		//根據chinese_str(字元unicode碼)，在字型檔案face得到glyph，載入到slot(face->glyph)裡面
		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;
		}

		//從glyph得到BBox，BBox含有每個文字的xMin，xMax，yMin，yMax
		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;

		/* now, draw to our target surface (convert position) */
		//描繪出來，slot就是face裡面的glyph
		draw_bitmap( &slot->bitmap,
	                 slot->bitmap_left,//bitmap_left這是笛卡爾座標系
	                 var.yres - slot->bitmap_top );//slot->bitmap_top是笛卡爾座標系

		/* increment pen position */
		//增加筆的位置
		pen.x += slot->advance.x;
		//pen.y += slot->advance.y;

	}



	/* 確定座標: A中\向量字型\
        * lcd_x = 0
        * lcd_y = line_box_ymax - line_box_ymin + 24
        * 轉換為笛卡爾座標系:
        * x = lcd_x = 0
        * y = var.yres - lcd_y = var.yres - (line_box_ymax - line_box_ymin + 24)
	  */
	//pen就是向量字型的位置
	//第一個字元的原點“我”
	pen.x = 0 * 64;//單位是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 );//設定轉換矩陣matrix，轉換引數,0表示不旋轉

		/* load glyph image into the slot (erase previous one) */
		//FT_LOAD_RENDER引數會把glyph向量檔案轉換為點陣圖
		//根據chinese_str(字元unicode碼)，在字型檔案face得到glyph，載入到slot(face->glyph)裡面
		error = FT_Load_Char( face, wstr2[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;
		}

		//從glyph得到BBox，BBox含有每個文字的xMin，xMax，yMin，yMax
		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;

		/* now, draw to our target surface (convert position) */
		//描繪出來，slot就是face裡面的glyph
		draw_bitmap( &slot->bitmap,
	                 slot->bitmap_left,//bitmap_left這是笛卡爾座標系
	                 var.yres - slot->bitmap_top );//slot->bitmap_top是笛卡爾座標系

		/* increment pen position */
		//增加筆的位置
		pen.x += slot->advance.x;
		//pen.y += slot->advance.y;

	}

	
	return 0;	
}

 

居中顯示

內容如下：

參考第11頁:https://wenku.baidu.com/view/060a0b44f12d2af90342e63a.html?from=search

（1）首先定義一個用來儲存一行文字的字形圖象陣列

（2）首先以座標（0,0）為基值，獲取每個文字的字形影象和座標值，存到glyphs[]裡

（3）通過glyphs[]存的一行字形圖象，計算出邊界框

（4）通過邊界框，找到居中顯示的座標資訊

（5）通過座標資訊，將glyphs[]存的一行字形影象顯示出來

居中顯示文字程式碼如下：

#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 <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_H

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

#define MAX_GLYPHS  100

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;
		}
	}
}

/* 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;


	//printf("x = %d, y = %d\n", x, y);

	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;

		  //image[j][i] |= bitmap->buffer[q * bitmap->width + p];
		  //輸出函式，因為buffer是一個位元組，而lcd_put_pixel()是0x00RRGGBB,所以打印出來的是藍色字型
		  lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);//引數:x座標，y座標，顏色值
		}
	}
}

//從寬字元獲得glyphs
int Get_Glyphs_Frm_Wstr(FT_Face face, wchar_t *wstr, TGlyph glyphs[])
{
	int n;
	PGlyph glyph = glyphs; 
	int pen_x = 0;
	int pen_y = 0;
	int error;
	FT_GlyphSlot slot = face->glyph;//插槽

	//把wstr每個字元取出來
	for (n = 0; n < wcslen(wstr); n++)
	{
		//根據字串wstr的unicode碼wstr[n]獲得glyph的索引
		glyph->index = FT_Get_Char_Index( face, wstr[n] );

		/* store current pen position */
		glyph->pos.x = pen_x;
		glyph->pos.y = pen_y;

		//從字型檔案face的glyph加載出來
		//load時是把glyph放入face->glyph插槽
		error = FT_Load_Glyph( face, glyph->index, FT_LOAD_DEFAULT );
		if ( error ) 
			continue;

		//把glyph拷貝出來，防止覆蓋
		 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/64point

		/* increment number of glyphs */
		//指向下一個儲存的位置
		glyph++;
	}

	/* count number of glyphs loaded */
	//返回glyph的個數
	return (glyph - glyphs);
}

//計算長度和寬度，計算glyphs
void  compute_string_bbox(TGlyph glyphs[], FT_UInt num_glyphs, FT_BBox  *abbox)
{
	//含有x和y方向最小值，最大值
	FT_BBox  bbox;
	int n;
	
	bbox.xMin = bbox.yMin =  32000;
	bbox.xMax = bbox.yMax = -32000;

	//取出每一個字的BBox，一一比較，確定值
	for ( n = 0; n < num_glyphs; n++ )
	{
		FT_BBox  glyph_bbox;

		//FT_CLYPH_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;
	int error;
	
	for (n = 0; n < num_glyphs; n++)
	{
		//pen是新舊位置的偏移值,因為原本是在笛卡爾座標系的原點，現在要移動到中間
		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);
		}
	}
	
}

int main(int argc, char **argv)
{
	wchar_t *wstr1 = L"我是程式設計師gif";
	wchar_t *wstr2 = L"Hello World";
	
	FT_Library    library;
	FT_Face       face;//字型
	int error;
	FT_Vector     pen;                    /* untransformed origin  */
	FT_GlyphSlot  slot;
	int i;
	//方框
	FT_BBox bbox;

	//某一行的BBox的y最小值和最大值
	int line_box_ymin = 10000;
	int line_box_ymax = 0;

	//中間顯示時的寬度和高度
	int line_box_width;
	int line_box_height;

	TGlyph glyphs[MAX_GLYPHS];  /* glyphs table */
	FT_UInt num_glyphs; //glyphs陣列存有多少文字

	if (argc != 2)//打印出用法
	{
		printf("Usage : %s <font_file>\n", argv[0]);
		return -1;
	}

	fd_fb = open("/dev/fb0", O_RDWR);//開啟LCD
	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;
	}

	//記錄LCD的引數
	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);

	/* 顯示向量字型，把show_font和example2兩個合在一起 */
	error = FT_Init_FreeType( &library );              /* 初始化freetype庫 */
	/* error handling omitted */

	//裝載字型檔案
	error = FT_New_Face( library, argv[1], 0, &face ); /* 開啟一個字型檔案 */
	/* error handling omitted */

	//每得到一個face，都會有一個slot插槽，插槽就是裝載一個字型裡面的資料
	//每載入一個文字，插槽slot就會變換一下，裡面的資料時最新的
	slot = face->glyph;

	//設定字型的大小24X24
	FT_Set_Pixel_Sizes(face, 24, 0);



	/* 第一行字元wstr1 */
	//從Wstr裡面獲得glyphs,face是字型檔案，
	num_glyphs = Get_Glyphs_Frm_Wstr(face, wstr1, glyphs);	

	compute_string_bbox(glyphs, num_glyphs, &bbox);
	line_box_width  = bbox.xMax - bbox.xMin;
	line_box_height = bbox.yMax - bbox.yMin;

	//確定座標系
	pen.x = (var.xres - line_box_width)/2 * 64;
	pen.y = (var.yres - line_box_height)/2 * 64;

	//描繪
	Draw_Glyphs(glyphs, num_glyphs, pen);




	/* 第二行字wstr2 */
	//把wstr2從字型檔案face 加載出來到glyphs
	num_glyphs = Get_Glyphs_Frm_Wstr(face, wstr2, glyphs);	

	//計算大小
	compute_string_bbox(glyphs, num_glyphs, &bbox);
	line_box_width  = bbox.xMax - bbox.xMin;
	line_box_height = bbox.yMax - bbox.yMin;

	//確定座標系
	pen.x = (var.xres - line_box_width)/2 * 64;
	pen.y = pen.y - 24 * 64;//減24相當於往下移動24

	//描繪
	Draw_Glyphs(glyphs, num_glyphs, pen);	
	
	return 0;	
}

效果圖：