[導(dǎo)讀]出品21ic論壇 kk的回憶網(wǎng)站：bbs.21ic.com上次我們介紹了Wio終端的優(yōu)異性能及簡單的使用方法，這次我們看一下Wio終端的強大顯示功能，并了解圖形函數(shù)的使用方法。1.出色的顯示功能在Wio終端上，最大的器件要數(shù)TFT顯示屏了，其實在例程的數(shù)量上顯示屏也是占...
出品 21ic論壇 kk的回憶
網(wǎng)站：bbs.21ic.com
上次我們介紹了Wio終端的優(yōu)異性能及簡單的使用方法，這次我們看一下Wio終端的強大顯示功能，并了解圖形函數(shù)的使用方法。
1.出色的顯示功能
在Wio終端上，最大的器件要數(shù)TFT顯示屏了，其實在例程的數(shù)量上顯示屏也是占首位的，參見圖1所示。
圖1 顯示屏示例
下面我們就領(lǐng)略一下它的特色，看看在設(shè)計界面方面它能為我們帶來哪些幫助。
1）字體豐富
Wio終端提供了豐富的字體支持，其字體顯示效果如圖2所示。
圖2字體效果
2）旋轉(zhuǎn)顯示
在界面設(shè)計上，因應(yīng)用的需要往往會選擇屏幕的使用方向，相應(yīng)的顯示內(nèi)容也會產(chǎn)生改變。在手機的設(shè)計上，更是引入了力傳感器，讓手機能在旋轉(zhuǎn)時來改變內(nèi)容的方向，Wio終端也同樣也隨意的變換顯示方向，參見圖3所示。
圖3旋轉(zhuǎn)顯示
3）圖表效果
統(tǒng)計圖表是一種常用的文檔形式，在Wio終端也也依然能夠?qū)崿F(xiàn)，如圓餅圖及分欄表格等，其顯示如圖4所示。
圖4圖表效果
4）時鐘效果
在時間計時器的情況下，在Wio終端可以很容易地實現(xiàn)2種形式的電子時鐘計時，其形式如圖5所示。
圖5計時效果
5）復(fù)雜曲線
借助圖形函數(shù)和強大計算能力的支持，結(jié)合曲線函數(shù)的使用，在Wio終端能繪制出復(fù)雜而美麗的曲線圖形。
圖6曲線繪制
6）指針表盤
在工控領(lǐng)域，離不開各式各樣的儀表，其中指針式儀表是一種表現(xiàn)起來直觀，但又相對復(fù)雜的樣式，在Wio終端它依然能完美地展現(xiàn)在入門眼前，見圖7所示。
圖7表針指示
7）特效紛呈
除了以上常規(guī)表現(xiàn)形式，在Wio終端還能展現(xiàn)出在藝術(shù)片上所呈現(xiàn)特效制作，圖8就是其達(dá)到效果。
圖8特效
8）其它效果
盡管介紹了怎么多，但依然有沒能歸類的顯示效果，如圖9是一個展示物體在屏幕邊緣進(jìn)行彈射的游戲效果，而圖10則是通過計算所繪制出的圖案。
圖9彈射游戲圖10圖案繪制
有了這些例程為模板，再遇到同樣的設(shè)計問題了，在此基礎(chǔ)上只需添加上你的內(nèi)容即可快速、輕松地解決。
2. 庫的加載
要使用TFT屏的顯示函數(shù)，需有相應(yīng)庫的支持，訪問該鏈接Seeed_Arduino_LCD，即可從中下載到Seeed_Arduino_LCD-master.zip。
圖11 下載庫文件
然后按圖2和圖3所示來添加下載的庫文件，再按圖4所示添加“Adafruit Zero DMA”。
圖12 添加庫文件
圖13 選取添加內(nèi)容
圖14 添加“Adafruit Zero DMA”
圖15 完成添加
在此，就完成了使用TFT屏顯示的準(zhǔn)備工作。
3. 顯示屏與色彩模式
Wio終端所用的顯示屏是一塊2.4英寸的顯示屏，以ILI9341為驅(qū)動芯片，屏幕的解析度為320*240像素點，坐標(biāo)系統(tǒng)是按圖16來設(shè)置，其中水平方向是x軸，垂直方向是y軸，左上是坐標(biāo)的原點x=0，y=0。
圖16 坐標(biāo)系統(tǒng)
顯示屏采用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. 圖形函數(shù)及用法
為了便于用戶使用，在開發(fā)環(huán)境下提供了豐富的顯示函數(shù)，掌握這些函數(shù)的使用可以起到事半功倍的效果。
1）屏幕填充函數(shù)
該函數(shù)的格式為：
fillScreen(uint32_t color);
使用該函數(shù)可用來清除屏幕，其使用形式為：tft.fillScreen(TFT_BLACK);
其中的“TFT_BLACK”，用于指定以黑色來清屏。
2）畫點函數(shù)
該函數(shù)的格式為：drawPixel(int32_t x, int32_t y, uint32_t color);
其作用是在屏上的坐標(biāo)點（x,y）上顯示指定色彩為color的點，其多用于繪制各種曲線或圖像。
此外，由于在函數(shù)中未提供對中文顯示的支持，故用該函數(shù)還可以自行設(shè)計相應(yīng)的中文顯示函數(shù)。
其使用形式為：tft.drawPixel(4,7,TFT_BLACK);
3）畫線函數(shù)
該函數(shù)的格式為：drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color);
其作用是在屏上從坐標(biāo)點（x0,y0）到（x1,y1）以指定色彩為color繪制一條直線，其多用于繪制波形曲線。
其使用形式為：tft.drawLine(0,0,160,120,TFT_BLACK);
作為畫線函數(shù)的特例，函數(shù)drawFastHLine（）用于繪制水平線，而函數(shù)drawFastVLine （）用于繪制垂線，其函數(shù)格式為：
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);
其中參數(shù)x,y是起點位置，而w和h是指線的寬度和高度，color是指直線的色彩。
4）矩形函數(shù)
該函數(shù)的格式為：drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);
其作用是在屏上從坐標(biāo)點（x,y），以指定色彩color繪制一個寬度和高度分別為w和h的矩形。
其使用形式為：
tft.drawRect(110,70,100,100,TFT_BLACK);
若繪制實心矩形，則使用函數(shù)fillRect（），其函數(shù)格式為：fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);
5）圓函數(shù)
該函數(shù)的格式為：drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);
其作用是在屏上從坐標(biāo)點（x0,y0），以指定色彩color繪制一個半徑為r的圓。
其使用形式為：tft.drawCircle(160,120,50,TFT_BLACK);
若繪制實心圓，則使用函數(shù)fillCircle（），其函數(shù)格式為：fillCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);
6）三角形函數(shù)該函數(shù)的格式為：drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);
其作用是在屏上按3個坐標(biāo)點（x0,y0）、（x1,y1）和（x2,y2），以指定色彩color繪制一個三角形。
其使用形式為：tft.drawTriangle(160,70,60,170,260,170,TFT_BLACK);
若繪制實心三角形，則使用函數(shù)fillTriangle（），其函數(shù)格式為：fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);
7）圓角矩形函數(shù)該函數(shù)的格式為：drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);
其作用是在屏上從坐標(biāo)點（x,y），以指定色彩color繪制一個寬度和高度分別為w和h倒角半徑為r的圓角矩形。
其使用形式為：tft.drawRoundRect(110,70,100,100,10,TFT_BLACK);
若繪制實心圓角矩形，則使用函數(shù)fillRoundRect（），其函數(shù)格式為：fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);
8）橢圓函數(shù)該函數(shù)的格式為：drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);
其作用是在屏上從坐標(biāo)點（x0,y0），以指定色彩color繪制一個長短軸為rx和ry的橢圓。
其使用形式為：tft.drawEllipse(160,120,50,100,TFT_BLACK);
若繪制實心橢圓，則使用函數(shù)fillEllipse（），其函數(shù)格式為：fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);
9）字符函數(shù)該函數(shù)的格式為：
drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_tsize)其作用是在屏上從坐標(biāo)點（x,y）以指定色彩color顯示一個字符c，該字符的大小為size，背景色為bg。
其使用形式為：
tft.drawChar(140,120,'A',TFT_BLACK, TFT_RED,2);
網(wǎng)站：bbs.21ic.com
上次我們介紹了Wio終端的優(yōu)異性能及簡單的使用方法，這次我們看一下Wio終端的強大顯示功能，并了解圖形函數(shù)的使用方法。
1.出色的顯示功能
在Wio終端上，最大的器件要數(shù)TFT顯示屏了，其實在例程的數(shù)量上顯示屏也是占首位的，參見圖1所示。
圖1 顯示屏示例下面我們就領(lǐng)略一下它的特色，看看在設(shè)計界面方面它能為我們帶來哪些幫助。
1）字體豐富
Wio終端提供了豐富的字體支持，其字體顯示效果如圖2所示。
圖2字體效果2）旋轉(zhuǎn)顯示
在界面設(shè)計上，因應(yīng)用的需要往往會選擇屏幕的使用方向，相應(yīng)的顯示內(nèi)容也會產(chǎn)生改變。在手機的設(shè)計上，更是引入了力傳感器，讓手機能在旋轉(zhuǎn)時來改變內(nèi)容的方向，Wio終端也同樣也隨意的變換顯示方向，參見圖3所示。
圖3旋轉(zhuǎn)顯示3）圖表效果
統(tǒng)計圖表是一種常用的文檔形式，在Wio終端也也依然能夠?qū)崿F(xiàn)，如圓餅圖及分欄表格等，其顯示如圖4所示。
圖4圖表效果4）時鐘效果
在時間計時器的情況下，在Wio終端可以很容易地實現(xiàn)2種形式的電子時鐘計時，其形式如圖5所示。
圖5計時效果5）復(fù)雜曲線
借助圖形函數(shù)和強大計算能力的支持，結(jié)合曲線函數(shù)的使用，在Wio終端能繪制出復(fù)雜而美麗的曲線圖形。
圖6曲線繪制6）指針表盤
在工控領(lǐng)域，離不開各式各樣的儀表，其中指針式儀表是一種表現(xiàn)起來直觀，但又相對復(fù)雜的樣式，在Wio終端它依然能完美地展現(xiàn)在入門眼前，見圖7所示。
圖7表針指示7）特效紛呈
除了以上常規(guī)表現(xiàn)形式，在Wio終端還能展現(xiàn)出在藝術(shù)片上所呈現(xiàn)特效制作，圖8就是其達(dá)到效果。
圖8特效8）其它效果
盡管介紹了怎么多，但依然有沒能歸類的顯示效果，如圖9是一個展示物體在屏幕邊緣進(jìn)行彈射的游戲效果，而圖10則是通過計算所繪制出的圖案。
圖9彈射游戲圖10圖案繪制有了這些例程為模板，再遇到同樣的設(shè)計問題了，在此基礎(chǔ)上只需添加上你的內(nèi)容即可快速、輕松地解決。
2. 庫的加載
要使用TFT屏的顯示函數(shù)，需有相應(yīng)庫的支持，訪問該鏈接Seeed_Arduino_LCD，即可從中下載到Seeed_Arduino_LCD-master.zip。
圖11 下載庫文件然后按圖2和圖3所示來添加下載的庫文件，再按圖4所示添加“Adafruit Zero DMA”。
圖12 添加庫文件圖13 選取添加內(nèi)容圖14 添加“Adafruit Zero DMA”圖15 完成添加在此，就完成了使用TFT屏顯示的準(zhǔn)備工作。
3. 顯示屏與色彩模式
Wio終端所用的顯示屏是一塊2.4英寸的顯示屏，以ILI9341為驅(qū)動芯片，屏幕的解析度為320*240像素點，坐標(biāo)系統(tǒng)是按圖16來設(shè)置，其中水平方向是x軸，垂直方向是y軸，左上是坐標(biāo)的原點x=0，y=0。
圖16 坐標(biāo)系統(tǒng)顯示屏采用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. 圖形函數(shù)及用法
為了便于用戶使用，在開發(fā)環(huán)境下提供了豐富的顯示函數(shù)，掌握這些函數(shù)的使用可以起到事半功倍的效果。
1）屏幕填充函數(shù)
該函數(shù)的格式為：
fillScreen(uint32_t color);
使用該函數(shù)可用來清除屏幕，其使用形式為：tft.fillScreen(TFT_BLACK);
其中的“TFT_BLACK”，用于指定以黑色來清屏。
2）畫點函數(shù)
該函數(shù)的格式為：drawPixel(int32_t x, int32_t y, uint32_t color);
其作用是在屏上的坐標(biāo)點（x,y）上顯示指定色彩為color的點，其多用于繪制各種曲線或圖像。
此外，由于在函數(shù)中未提供對中文顯示的支持，故用該函數(shù)還可以自行設(shè)計相應(yīng)的中文顯示函數(shù)。
其使用形式為：tft.drawPixel(4,7,TFT_BLACK);
3）畫線函數(shù)
該函數(shù)的格式為：drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color);
其作用是在屏上從坐標(biāo)點（x0,y0）到（x1,y1）以指定色彩為color繪制一條直線，其多用于繪制波形曲線。
其使用形式為：tft.drawLine(0,0,160,120,TFT_BLACK);
作為畫線函數(shù)的特例，函數(shù)drawFastHLine（）用于繪制水平線，而函數(shù)drawFastVLine （）用于繪制垂線，其函數(shù)格式為：
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);
其中參數(shù)x,y是起點位置，而w和h是指線的寬度和高度，color是指直線的色彩。
4）矩形函數(shù)
該函數(shù)的格式為：drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);
其作用是在屏上從坐標(biāo)點（x,y），以指定色彩color繪制一個寬度和高度分別為w和h的矩形。
其使用形式為：
tft.drawRect(110,70,100,100,TFT_BLACK);
若繪制實心矩形，則使用函數(shù)fillRect（），其函數(shù)格式為：fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);
5）圓函數(shù)
該函數(shù)的格式為：drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);
其作用是在屏上從坐標(biāo)點（x0,y0），以指定色彩color繪制一個半徑為r的圓。
其使用形式為：tft.drawCircle(160,120,50,TFT_BLACK);
若繪制實心圓，則使用函數(shù)fillCircle（），其函數(shù)格式為：fillCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);
6）三角形函數(shù)該函數(shù)的格式為：drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);
其作用是在屏上按3個坐標(biāo)點（x0,y0）、（x1,y1）和（x2,y2），以指定色彩color繪制一個三角形。
其使用形式為：tft.drawTriangle(160,70,60,170,260,170,TFT_BLACK);
若繪制實心三角形，則使用函數(shù)fillTriangle（），其函數(shù)格式為：fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);
7）圓角矩形函數(shù)該函數(shù)的格式為：drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);
其作用是在屏上從坐標(biāo)點（x,y），以指定色彩color繪制一個寬度和高度分別為w和h倒角半徑為r的圓角矩形。
其使用形式為：tft.drawRoundRect(110,70,100,100,10,TFT_BLACK);
若繪制實心圓角矩形，則使用函數(shù)fillRoundRect（），其函數(shù)格式為：fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);
8）橢圓函數(shù)該函數(shù)的格式為：drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);
其作用是在屏上從坐標(biāo)點（x0,y0），以指定色彩color繪制一個長短軸為rx和ry的橢圓。
其使用形式為：tft.drawEllipse(160,120,50,100,TFT_BLACK);
若繪制實心橢圓，則使用函數(shù)fillEllipse（），其函數(shù)格式為：fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);
9）字符函數(shù)該函數(shù)的格式為：
drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_tsize)其作用是在屏上從坐標(biāo)點（x,y）以指定色彩color顯示一個字符c，該字符的大小為size，背景色為bg。
其使用形式為：
tft.drawChar(140,120,'A',TFT_BLACK, TFT_RED,2);
下載文檔
