【STM32H7】第13章 ThreadX GUIX視窗任意位置繪製2D圖形
最新教程下載：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429
第13章 ThreadX GUIX視窗任意位置繪製2D圖形
本章節為大家講解GUIX視窗任意位置繪製2D圖形。不僅是視窗，各種控制元件上的繪製也是同樣的方法。
13.1初學者重要提示
13.2 GUIX Studio設定視窗回撥
13.3 GUIX Studio的2D繪製實現
13.4 實驗例程設計框架
13.5實驗例程
13.6 總結
13.1 初學者重要提示
- 務必看第11章學習GUIX Studio的使用方法和第12章學習GUIX Studio生成的程式碼移植到硬體平臺的方法。
- 本章節教程的3.4小節是重點，對每個函式的使用都進行了說明。
13.2 GUIX Studio設定視窗回撥
GUIX Studio的設定方法與第11章一樣，我們這裡僅把控制元件的位置和大小做了調整，騰出來的位置方便2D圖形繪製。
新調整的介面效果如下：
文字控制元件和按鈕控制元件以外的區域，我們都可以做2D繪製。為了讓800*480解析度顯示屏和480*272解析度顯示屏都可以正常顯示，我們後面的2D繪製也會在480*272的範圍內繪製。
下面我們為視窗控制元件設定一個Draw Function，此功能是視窗的繪圖回撥函式。在這個回撥函式裡面，大家可以繪製任意的2D圖形。
這裡為Draw Function設定的回撥函式名為_cbWindow0，然後就可以使用GUIX Studio生成新的程式碼。生成的程式碼移植到硬體平臺的方法看第12章即可。
13.3 GUIX的2D繪製實現
在GUIX Studio上設定好繪圖函式名後，剩下就是在程式裡面實現2D繪製，這裡把實現方法為大家做個說明。
13.3.1 瞭解2D繪製函式
GUIX的2D效果繪製主要是通過canvas相關的幾個函式實現：
這裡提供的這些函式，大家根據官網手冊的引數說明和每個例子後的呼叫例項使用即可，但要注意呼叫的一些套路，下面舉例時再為大家細說。
13.3.2 瞭解畫筆brush函式
畫筆函式在context相關的幾個API裡面：
Brush畫筆主要定義瞭如下引數：
typedef struct GX_BRUSH_STRUCT { GX_PIXELMAP *gx_brush_pixelmap; /*用於點陣圖 */ GX_FONT *gx_brush_font; /* 用於文字字型 */ ULONG gx_brush_line_pattern; /* 用於虛線繪製 */ ULONG gx_brush_pattern_mask; /* 用於虛線繪製 */ GX_COLOR gx_brush_fill_color; /* 填充顏色值 */ GX_COLOR gx_brush_line_color; /* 畫線顏色值 */ UINT gx_brush_style; /* 畫筆樣式 */ GX_VALUE gx_brush_width; /* 畫筆線寬 */ UCHAR gx_brush_alpha; /* 用於Alpha混合 */ } GX_BRUSH;
其中畫筆樣式成員gx_brush_style涉及到多個引數：
GX_BRUSH_OUTLINE
GX_BRUSH_SOLID_FILL
GX_BRUSH_PIXELMAP_FILL
GX_BRUSH_ALIAS
GX_BRUSH_SOLID_FILL
GX_BRUSH_UNDERLINE
GX_BRUSH_ROUND
GX_CANVAS_SIMPLE
GX_CANVAS_MANAGED
GX_CANVAS_VISIBLE
GX_CANVAS_MODIFIED
GX_CANVAS_COMPOSITE
這裡將當前用到的三個樣式做個說明：
- GX_BRUSH_ALIAS
用於實現畫線，橢圓，圓圈，多邊形等抗鋸齒效果。
- GX_BRUSH_SOLID_FILL
用於實現橢圓，圓圈，矩形，多邊形等圖形的填充效果，如果不使能此選項，繪製的是圖形輪廓。
- GX_BRUSH_ROUND
用於設定畫線功能時，將直線兩端的截面設定成圓形，預設是方形的。
13.3.3 窗口裡面做2D繪製的基本框架
視窗的Draw Function繪圖回撥函式實現框架如下，大家在這個框架裡面新增自己的2D功能即可：
VOID _cbWindow0(GX_WINDOW *widget) { GX_RECTANGLE drawto; GX_CANVAS *mycanvas; /* 預設的視窗繪製回撥函式，即預設介面效果繪製 */ gx_window_draw(widget); /* 定義一個矩形框，後續的2D繪製函式都是在這個矩形範圍內繪製的 */ gx_utility_rectangle_define(&drawto, x0, y0, x1, y1); /* 返回視窗對應的canvas畫布 */ gx_widget_canvas_get(widget, &mycanvas); /* 在指定的畫布上啟動繪圖。*/ gx_canvas_drawing_initiate(mycanvas, widget, &drawto); 此處新增程式碼，呼叫2D函式繪製 /* 繪製完畢，用於強制立即繪製，注意，務必和gx_canvas_drawing_initiate成對呼叫 */ gx_canvas_drawing_complete(mycanvas, GX_TRUE); }
這個框架基本是固定的，大家直接呼叫即可，下面舉一個例項來詳細說明每個函式的作用。
13.3.4 窗口裡面2D繪製例項（重要）
例項程式碼如下，本章教程配套例子也是用的這個程式碼：
/* ********************************************************************************************************* * 函 數 名: _cbWindow0 * 功能說明: 視窗回撥函式 * 形 參: widget 視窗控制代碼 * 返 回 值: 無 ********************************************************************************************************* */ VOID _cbWindow0(GX_WINDOW *widget) { GX_RECTANGLE drawto; GX_RECTANGLE tempdraw; GX_CANVAS *mycanvas; GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } }; /* 預設的視窗繪製回撥函式，即預設介面效果繪製 */ gx_window_draw(widget); /* 定義一個矩形框，後續的2D繪製函式都是在這個矩形範圍內繪製的 */ gx_utility_rectangle_define(&drawto, 10, 100, 400, 265); /* 返回視窗對應的canvas畫布 */ gx_widget_canvas_get(widget, &mycanvas); /* 在指定的畫布上啟動繪圖 */ gx_canvas_drawing_initiate(mycanvas, widget, &drawto); /* 設定筆刷畫線的顏色值 */ gx_context_raw_line_color_set(0xffff0000); /* 設定筆刷填充的顏色值 */ gx_context_raw_fill_color_set(0xff00ff00); /* 通過GX_BRUSH_SOLID_FILL使能圓圈，矩形，多邊形等繪製為填充效果 */ gx_context_brush_style_set(GX_BRUSH_SOLID_FILL); /* 設定筆刷線寬 */ gx_context_brush_width_set(1); /* 繪製直線 */ gx_canvas_line_draw(10, 100, 50, 150); /* 繪製圓圈 */ gx_canvas_circle_draw(120, 150, 50); /* 繪製橢圓 */ gx_canvas_ellipse_draw(300, 150, 100, 50); /* 繪製多邊形 */ gx_canvas_polygon_draw(my_polygon, 3); /* 繪製矩形 */ tempdraw.gx_rectangle_left = 30; tempdraw.gx_rectangle_top = 210; tempdraw.gx_rectangle_right = 100; tempdraw.gx_rectangle_bottom = 260; gx_canvas_rectangle_draw(&tempdraw); /* 用於強制立即繪製，注意，務必和gx_canvas_drawing_initiate成對呼叫 */ gx_canvas_drawing_complete(mycanvas, GX_TRUE); }
- gx_window_draw
作為視窗的Draw Function繪圖回撥函式，此函式用於視窗預設效果的繪製。
- gx_utility_rectangle_define
定義一個矩形框，後續的2D繪製函式都是在這個矩形範圍內繪製的，此函式的後四個引數是左上角位置和右下角位置。
- gx_widget_canvas_get
返回視窗對應的canvas畫布。
- gx_canvas_drawing_initiate
在指定的畫布上啟動繪圖。此功能在GUIX內部被延遲繪圖演算法呼叫，在需要畫布時自動執行更新。 但是允許應用程式繞過延期繪圖演算法並立即執行。首先呼叫gx_canvas_drawing_inititate在畫布上繪畫。然後呼叫所需的繪圖函式，最後呼叫gx_canvas_drawing_complete即可。
- gx_context_raw_line_color_set
設定筆刷畫線的顏色值，比如直線，圓圈的輪廓，橢圓的輪廓，矩形的輪廓，多邊形的輪廓等都是採用的這個值。注意這個顏色值是32bit的ARGB格式，每個bit代表的含義如下：
- gx_context_raw_fill_color_set
設定筆刷填充的顏色值，比如圓圈填充，橢圓填充，矩形填充，多邊形填充等都是採用的這個值。
- gx_context_brush_style_set
用於設定筆刷的樣式，我們這裡設定了GX_BRUSH_SOLID_FILL，表示圓圈，矩形，多邊形等繪製為填充效果。如果不設定此樣式，表示僅顯示一個輪廓。這裡特別注意一點，各種樣式引數可以通過或操作全部執行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
- gx_context_brush_width_set
用於設定筆刷線寬，此線寬對直線，圓圈的輪廓，橢圓的輪廓，矩形的輪廓，多邊形的輪廓等都起作用。注意，對於這些2D繪製，必須要設定線寬才可以正常顯示。
- gx_canvas_line_draw
直線繪製，注意座標位置是相對於程式碼中的視窗，而不是相對於gx_utility_rectangle_define定義的矩形區域。
- gx_canvas_circle_draw
圓圈繪製，座標含義同上。
- gx_canvas_ellipse_draw
橢圓繪製，座標含義同上。
- gx_canvas_polygon_draw
多邊形繪製，座標含義同上。多邊形的繪製是把使用者設定的幾個座標點依次連線到一起。
- gx_canvas_rectangle_draw
矩形框繪製，座標點含義同上。
- gx_canvas_drawing_complete
用於強制立即繪製，注意，務必和gx_canvas_drawing_initiate成對呼叫。
針對這個例項，推薦大家設定不同的引數看效果，熟練掌握這些函式的用法，這樣用起GUIX也得心應手。
13.4 實驗例程設計框架
本章例程的重點是GUIX任務的實現，任務中專門為視窗設定了一個Draw Function繪圖回撥函式。
13.5 實驗例程
（注，如果是電阻屏，需要做觸控校準，校準方法看本教程附件章節A）
配套例子：
本章節配套了如下兩個例子供大家移植參考：
- V7-2011_GUIX 2D Draw
GUIX Studio生成的程式碼在硬體平臺實際執行的工程，含有GCC，IAR，MDK AC5和AC6四個版本工程。
- V7-2012_GUIX Studio 2D Draw
GUIX Studio工程模板，設計介面後，生成的檔案可直接新增到MDK，IAR和GCC軟體平臺使用。
實驗目的：
- 本章主要學習GUIX的2D函式繪製。
實驗內容：
- 共建立瞭如下幾個任務，通過按下按鍵K1可以通過串列埠列印任務堆疊使用情況
App Task Start任務 ：啟動任務，這裡用作BSP驅動包處理。
App Task MspPro任務 ：訊息處理，這裡用作浮點數串列埠列印。
App Task UserIF任務 ：按鍵訊息處理。
App Task GUI任務 ：GUI應用任務。
App Task STAT任務 ：統計任務。
App Task IDLE任務 ：空閒任務。
GUIX System Thread ：GUI系統任務。
System Timer Thread任務：系統定時器任務。
實驗效果：
GUIX Studio的介面設計如下：
串列埠列印任務執行情況：
IAR，MDK AC5和AC6工程可以串列埠列印任務執行情況：按開發板的按鍵K1可以列印，波特率 115200，資料位 8，奇偶校驗位無，停止位 1：
Embedded Studio（GCC）平臺的串列埠列印是通過其除錯元件SEGGER RTT做的串列埠列印，速度也非常快，列印效果如下：
展示裡面有亂碼是因為Embedded Studio不支援中文。
13.6 總結
本章節主要為大家講解了GUIX視窗任意位置繪製2D圖形，推薦大家設定不同的引數看效果，熟練掌握這些函式的用法，這樣用起GUIX也得心應手。