【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也得心應手。