本帖最后由 jinglixixi 于 2021-7-20 16:12 编辑
#申请原创#
上次我们介绍了Wio终端的优异性能及简单的使用方法，这次我们看一下Wio终端的强大显示功能，并了解图形函数的使用方法。 1.出色的显示功能 在Wio终端上，最大的器件要数TFT显示屏了，其实在例程的数量上显示屏也是占首位的，参见图1所示。 图1 显示屏示例 下面我们就领略一下它的特色，看看在设计界面方面它能为我们带来哪些帮助。 1）字体丰富 Wio终端提供了丰富的字体支持，其字体显示效果如图2所示。 图2字体效果 2）旋转显示 在界面设计上，因应用的需要往往会选择屏幕的使用方向，相应的显示内容也会产生改变。在手机的设计上，更是引入了力传感器，让手机能在旋转时来改变内容的方向，Wio终端也同样也随意的变换显示方向，参见图3所示。 图3旋转显示 3）图表效果 统计图表是一种常用的文档形式，在Wio终端也也依然能够实现，如圆饼图及分栏表格等，其显示如图4所示。 图4图表效果 4）时钟效果 在时间计时器的情况下，在Wio终端可以很容易地实现2种形式的电子时钟计时，其形式如图5所示。 图5计时效果 5）复杂曲线 借助图形函数和强大计算能力的支持，结合曲线函数的使用，在Wio终端能绘制出复杂而美丽的曲线图形。 图6曲线绘制 6）指针表盘 在工控领域，离不开各式各样的仪表，其中指针式仪表是一种表现起来直观，但又相对复杂的样式，在Wio终端它依然能完美地展现在入门眼前，见图7所示。 图7表针指示 7）特效纷呈 除了以上常规表现形式，在Wio终端还能展现出在艺术片上所呈现特效制作，图8就是其达到效果。 图8特效 8）其它效果 尽管介绍了怎么多，但依然有没能归类的显示效果，如图9是一个展示物体在屏幕边缘进行弹射的游戏效果，而图10则是通过计算所绘制出的图案。 图9弹射游戏 图10图案绘制 有了这些例程为模板，再遇到同样的设计问题了，在此基础上只需添加上你的内容即可快速、轻松地解决。 2. 库的加载 要使用TFT屏的显示函数，需有相应库的支持，访问该链接Seeed_Arduino_LCD，即可从中下载到Seeed_Arduino_LCD-master.zip。 图11 下载库文件 然后按图2和图3所示来添加下载的库文件，再按图4所示添加“Adafruit Zero DMA”。 图12 添加库文件 图13 选取添加内容 图14 添加“Adafruit Zero DMA” 图15 完成添加 在此，就完成了使用TFT屏显示的准备工作。 3. 显示屏与色彩模式 Wio终端所用的显示屏是一块2.4英寸的显示屏，以ILI9341为驱动芯片，屏幕的解析度为320*240像素点，坐标系统是按图16来设置，其中水平方向是x轴，垂直方向是y轴，左上是坐标的原点x=0，y=0。 图16 坐标系统 显示屏采用8位和16位色彩模式来显示色彩，其中RGB3色所占的位宽各有不同。 在8位色彩模式下，各位的含义为：
在16位色彩模式下，各位的含义为： 为了便于使用，常用的16位色彩定义为： #define TFT_BLACK 0x0000 /* 0, 0, 0 */ #define TFT_NAVY 0x000F /* 0,0, 128 */ #define TFT_DARKGREEN 0x03E0 /* 0, 128, 0 */ #define TFT_DARKCYAN 0x03EF /* 0,128, 128 */ #define TFT_MAROON 0x7800 /* 128,0, 0 */ #define TFT_PURPLE 0x780F /* 128, 0, 128 */ #define TFT_OLIVE 0x7BE0 /* 128,128, 0 */ #define TFT_LIGHTGREY 0xC618 /*192, 192, 192 */ #define TFT_DARKGREY 0x7BEF /* 128, 128, 128 */ #define TFT_BLUE 0x001F /* 0, 0, 255 */ #define TFT_GREEN 0x07E0 /* 0, 255, 0 */ #define TFT_CYAN 0x07FF /* 0,255, 255 */ #define TFT_RED 0xF800 /* 255,0, 0 */ #define TFT_MAGENTA 0xF81F /* 255, 0, 255 */ #define TFT_YELLOW 0xFFE0 /* 255,255, 0 */ #define TFT_WHITE 0xFFFF /* 255, 255, 255 */ #define TFT_ORANGE 0xFDA0 /*255, 180, 0 */ #define TFT_GREENYELLOW 0xB7E0 /* 180, 255, 0 */ 在使用时，可以色彩名称来选用色彩。 4. 图形函数及用法 为了便于用户使用，在开发环境下提供了丰富的显示函数，掌握这些函数的使用可以起到事半功倍的效果。 1）屏幕填充函数 该函数的格式为： fillScreen(uint32_t color); 使用该函数可用来清除屏幕，其使用形式为： tft.fillScreen(TFT_BLACK); 其中的“TFT_BLACK”，用于指定以黑色来清屏。 2）画点函数 该函数的格式为： drawPixel(int32_t x, int32_t y, uint32_t color); 其作用是在屏上的坐标点（x,y）上显示指定色彩为color的点，其多用于绘制各种曲线或图像。 此外，由于在函数中未提供对中文显示的支持，故用该函数还可以自行设计相应的中文显示函数。 其使用形式为： tft.drawPixel(4,7,TFT_BLACK); 3）画线函数 该函数的格式为： drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color); 其作用是在屏上从坐标点（x0,y0）到（x1,y1）以指定色彩为color绘制一条直线，其多用于绘制波形曲线。 其使用形式为： tft.drawLine(0,0,160,120,TFT_BLACK); 作为画线函数的特例，函数drawFastHLine（）用于绘制水平线，而函数drawFastVLine （）用于绘制垂线，其函数格式为： drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color); drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color); 其中参数x,y是起点位置，而w和h是指线的宽度和高度，color是指直线的色彩。 4）矩形函数 该函数的格式为： drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color); 其作用是在屏上从坐标点（x,y），以指定色彩color绘制一个宽度和高度分别为w和h的矩形。 其使用形式为： tft.drawRect(110,70,100,100,TFT_BLACK); 若绘制实心矩形，则使用函数fillRect（），其函数格式为： fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color); 5）圆函数 该函数的格式为： drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color); 其作用是在屏上从坐标点（x0,y0），以指定色彩color绘制一个半径为r的圆。 其使用形式为： tft.drawCircle(160,120,50,TFT_BLACK); 若绘制实心圆，则使用函数fillCircle（），其函数格式为： fillCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color); 6）三角形函数 该函数的格式为： drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color); 其作用是在屏上按3个坐标点（x0,y0）、（x1,y1）和（x2,y2），以指定色彩color绘制一个三角形。 其使用形式为： tft.drawTriangle(160,70,60,170,260,170,TFT_BLACK); 若绘制实心三角形，则使用函数fillTriangle（），其函数格式为： fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color); 7）圆角矩形函数 该函数的格式为： drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color); 其作用是在屏上从坐标点（x,y），以指定色彩color绘制一个宽度和高度分别为w和h倒角半径为r的圆角矩形。 其使用形式为： tft.drawRoundRect(110,70,100,100,10,TFT_BLACK); 若绘制实心圆角矩形，则使用函数fillRoundRect（），其函数格式为： fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color); 8）椭圆函数 该函数的格式为： drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor); 其作用是在屏上从坐标点（x0,y0），以指定色彩color绘制一个长短轴为rx和ry的椭圆。 其使用形式为： tft.drawEllipse(160,120,50,100,TFT_BLACK); 若绘制实心椭圆，则使用函数fillEllipse（），其函数格式为： fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor); 9）字符函数 该函数的格式为： drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_tsize) 其作用是在屏上从坐标点（x,y）以指定色彩color显示一个字符c，该字符的大小为size，背景色为bg。 其使用形式为： tft.drawChar(140,120,'A',TFT_BLACK, TFT_RED,2); 10）字符串函数 该函数的格式为： drawString(const String& string, int32_t poX, int32_t poY); 其作用是在屏上坐标点（poX, poY），显示指定字符串。 其使用形式为： tft.drawString(" Wio Terminal !",20,100); 5. 显示示例 有了前面介绍的知识，我们怎样才能完成一个自己的显示程序呢？ 要实现图17所示的显示效果，其程序和上传结果如图18所示。 图17显示效果 图18 程序及上传 程序中相关语句的用途如下： 1）语句tft.begin()的作用是启动屏幕显示； 2）语句tft.setRotation(3)的作用是按屏幕的摆放位置来显示；若修改其参数则使显示内容产生旋转，该参数的取值为0:~3； 3）语句tft.fillScreen(TFT_RED)的作用是以红色填充屏幕做背景； 4）语句tft.setTextColor(TFT_WHITE)的作用是以白色来显示内容； 5）语句tft.setTextSize(3)的作用是指定显示整体的大小，参数值越大字体越大； 6）最后3条语句的作用是指定显示内容。 若按图19所示来修改参数，则显示效果见图20所示。 图19参数修改 图20 修改后效果
了解了图形函数的使用方法后，后面我们会看到它在字体显示方面的独特魅力，值得关注呦！
| 
楼主
标题置顶
标题高亮
