13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
GUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。

& B. T2 Y, @- U! r新调整的界面效果如下：

% ^, Q8 ^# W7 L3 n( p7 ]
文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。

下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。
& Q7 A* I& D9 D" H$ i% S* @, p

2 _- L1 H# \) @
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
1 M. B) s2 |( t
, x# Q+ |. U6 H( c13.3 GUIX的2D绘制实现
- v# _5 f- k- g! u* w/ S3 F在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

13.3.1        了解2D绘制函数
0 w5 _$ n1 V& s7 oGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
- t% n1 A6 v0 P1 \+ O  T( k7 {
& p. t* A; g" O+ J

这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。

13.3.2        了解画笔brush函数
" {+ `, [" O$ _( }6 C6 G: [/ w) B画笔函数在context相关的几个API里面：

7 D; X0 H9 U% T, ^; a& s

1 ?; F1 J, h  r  ]6 lBrush画笔主要定义了如下参数：
2 b6 Q. y) d( L$ O5 _& t+ x

1. typedef struct GX_BRUSH_STRUCT
   - C$ C) u5 n  U! P/ I
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   3 w5 u! R, a7 V
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   0 t8 q( e" o* p8 @3 C9 Z
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   * K& @; \6 V; n: u: L
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   . Z1 I2 h# X$ e$ L$ h+ P7 G
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    - q. x" A$ S7 [4 b: F$ L
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

' m$ m$ Y6 a0 X. M7 V% n* b其中画笔样式成员gx_brush_style涉及到多个参数：
; m* R* t6 x( S6 [9 B# q
& ?$ |: f/ R3 h& ~

1. GX_BRUSH_OUTLINE
   
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   ) j: u6 c) X9 W
5. GX_BRUSH_SOLID_FILL
     p: _( G4 F# u8 |" @$ G
6. GX_BRUSH_UNDERLINE
   : d+ c2 @' o) S$ v) e9 l7 N
7. GX_BRUSH_ROUND
   / H0 Q+ P1 M7 F9 ^
8. 
   
9. GX_CANVAS_SIMPLE
   2 m. g/ J& J, T: v7 s4 l
10. GX_CANVAS_MANAGED
    ) ]1 T$ @0 r3 y5 ~- a2 n; B9 v
11. GX_CANVAS_VISIBLE
    & z/ b0 S% c4 F' D! c2 ?- t
12. GX_CANVAS_MODIFIED
    7 x: {$ O4 |: V: S/ Q/ B$ n
13. GX_CANVAS_COMPOSITE

复制代码

3 k6 I; I2 m2 {这里将当前用到的三个样式做个说明：
1 ], {; B$ K- K
1 ~4 p+ R* |7 \3 K  GX_BRUSH_ALIAS
! t& C5 V' e9 Y9 D% r9 [' e用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

8 w; N9 A+ t$ w& ~! B4 }* ^7 D  GX_BRUSH_SOLID_FILL
用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。

  GX_BRUSH_ROUND
+ R+ Q* k, p* o: \0 I+ a
用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
" D1 _7 c* D) c" u$ c2 w/ z( i; `
1 t5 E4 V1 a0 I; c! U13.3.3        窗口里面做2D绘制的基本框架
2 K" ~$ g% I$ Y) e( d窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：

' q* ]1 r8 F) A  N7 E

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   , i; q, z! s4 I8 }  n4 a
4.     GX_CANVAS *mycanvas;     
   
5. 
   ( ^+ D1 C6 A7 [/ H" X" e
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
   % ^* |0 M4 {7 [) M0 {$ Q
8. 
   5 q7 P8 g8 E5 b( Z, ~) N
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   - I6 q) e( Y! U# g' [
10.     gx_utility_rectangle_define(&drawto,
    ( j; Y/ a# J$ D: \4 R
11.                                 x0,
    $ Y4 p0 o* W; v
12.                                 y0,
    
13.                                 x1,
    6 V0 Y$ x  ~  R$ J1 U& @( x
14.                                 y1);
    
15. 
    : C9 \6 Z8 N' R
16.     /* 返回窗口对应的canvas画布 */
    * d4 l& R; D+ E
17.     gx_widget_canvas_get(widget, &mycanvas);
    ! d- g- R3 y; `
18. 
    - t3 h! u; D1 y( r- h
19.     /* 在指定的画布上启动绘图。*/
    $ |# H5 R8 m" N5 K
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    
22.     此处添加代码，调用2D函数绘制
    1 B$ e; V. n. V+ R9 [4 q* Z! R
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    / z/ w( u; n- `& A
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    " D* c% H8 N0 Z: |7 I
26. }

复制代码

+ \8 W1 J0 ~: O这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。

$ o4 ]  t. H  R13.3.4        窗口里面2D绘制实例（重要）
6 f) e" g3 [$ \7 `实例代码如下，本章教程配套例子也是用的这个代码：
0 F, K& |+ V" R  W/ O5 [

1. /*
   
2. *********************************************************************************************************
   
3. *    函 数 名: _cbWindow0
   $ J9 d! z/ c0 y# i& P$ Q
4. *    功能说明: 窗口回调函数
   ! D; T* H3 _3 P
5. *    形    参: widget 窗口句柄
   + P8 f- ]9 h$ `3 g: x3 ]" x
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   $ M; n8 w% q' V; X7 u
8. */
   3 p5 s' K# ?4 r7 s+ Q
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    6 n% v6 |& l7 A  }
11.     GX_RECTANGLE drawto;
    + q& `9 ~, l& @% W/ T; V' H+ v3 s* x
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    6 j& R; Q4 x% L
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    ( y# e8 p# o+ O- n+ S
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    ) `, u( H: ]6 S" r  ^
19. 
    - i1 i$ C# t5 @
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    + J+ P8 v- T5 C  n
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    - c5 K# F/ w9 w% I& r; {
23.                                 100,
    0 r- B0 @7 \  n, j" `) q
24.                                 400,
    % d# @; j- w, ^7 i3 P- {
25.                                 265);
      I5 B. n7 N4 j: J5 t
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    3 \0 _5 F# e3 E9 O
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
32. 
    " `# Y" Y! ~" O6 r$ N0 J
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    ' C1 }+ {! c0 u5 y! e9 ]
36.     /* 设置笔刷填充的颜色值 */   
    ' ?. L( b5 Q6 M7 h7 P6 |4 ^& L
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    ! a8 D/ W9 T+ r# G- t2 ?# @6 w
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    . Z+ L" c9 V( Z# ]8 Z0 A
41. 
    6 T' l) p9 k0 J3 \  ^, x0 l
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    
44. 
    2 N0 ^9 P0 k# r0 i3 o
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    $ X  P  Q. y1 v- D
47. 
    * F  M9 ]" v% I6 `+ Y
48.     /* 绘制圆圈 */
    . h) B0 _8 \" S, ?0 m% `3 j
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    + }( f# B0 ]. n. c4 f" Z
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    6 p: J+ o1 U% d4 V( F% y
53. 
    
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    
57.     /* 绘制矩形 */
    8 f( J) x, ?; m6 Z+ ?; S
58.     tempdraw.gx_rectangle_left = 30;
    ) a, F8 X0 `6 ]9 c. u
59.     tempdraw.gx_rectangle_top = 210;
    
60.     tempdraw.gx_rectangle_right = 100;
    $ l! N1 g5 B/ ~0 H/ a
61.     tempdraw.gx_rectangle_bottom = 260;
    " D  e# a7 `& d, f
62.     gx_canvas_rectangle_draw(&tempdraw);
    
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

& h3 J4 |* w# G* E2 j  gx_window_draw

作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

  gx_utility_rectangle_define
3 E! R+ U3 @6 @0 k+ T* [
2 W& `, |- V2 T" z6 E定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

/ z+ L: Q# o( G6 g) V4 i* d. b  gx_widget_canvas_get
1 C1 z- C& e" R- ~+ K
" X$ X6 ~; Z' `# e: N! m1 Y! h返回窗口对应的canvas画布。
: O( T% C  q4 w4 d# N
; i3 _; \0 A/ Z/ n* L/ }  gx_canvas_drawing_initiate
7 o; s" o! d. X4 \( ?
在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。

  gx_context_raw_line_color_set

设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
1 t' v' W' N* @3 Q- e) Y0 h+ O

+ W+ o( L* D& [* {1 f
1 x. ^* t9 @3 u1 z' c! }+ ~( c8 U  gx_context_raw_fill_color_set
" A1 z) S- Q* e( V, i4 m2 v
设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

5 U; b) p* ~8 f/ h+ ~* s  gx_context_brush_style_set

3 r/ ~4 p& a4 E  h/ j用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
3 J3 W$ y0 O6 u8 \0 F
  gx_context_brush_width_set
$ R- Z* ]  s8 s4 t9 ~0 j* e
, v) z  B# |& E/ o用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
" z/ r$ y( \) G! j' G$ W
  gx_canvas_line_draw

+ ]' y6 }; \! V# Q0 n直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。
& J0 c2 j; }% _
  gx_canvas_circle_draw
, i( }! a7 d7 u7 b
圆圈绘制，坐标含义同上。

- O5 C9 C! T0 R- Q  gx_canvas_ellipse_draw
% V5 B; z$ V( @8 G( Y2 u- P3 O椭圆绘制，坐标含义同上。

  gx_canvas_polygon_draw
7 \" d$ \1 n& P1 c) {% I8 d多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
# _0 m: i- Z$ s( H! _# g/ X2 l; |
  gx_canvas_rectangle_draw
6 y7 t) u- j+ t% e2 `- ^矩形框绘制，坐标点含义同上。
, h3 Z  Y1 h8 H" [! Z8 n  p4 T
  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
, y5 V" x1 C$ ^" A
13.4 实验例程设计框架
本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
& v1 Z  k* u# n' P- z* J$ J
" T5 ~; w+ e4 w( x

+ Q' e, U, J  H  l
13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
9 o- D/ K1 S, Q/ Y8 n
配套例子：

% C( S; y! n) ?, T8 W% `8 X$ y本章节配套了如下两个例子供大家移植参考：
5 n, Y8 e) H* ]) g
  V7-2011_GUIX 2D Draw

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。

8 b; f2 |8 C6 J8 `- m+ \  V7-2012_GUIX Studio 2D Draw
$ P6 u( k  H9 m$ N
GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

实验目的：

/ |* d+ x7 I: _( h% T+ u本章主要学习GUIX的2D函数绘制。

6 t0 N& A5 d) L# M实验内容：

( g& {+ ^- g# u. V7 b6 X" T共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
  V! t( X# I0 ]- oApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。
2 y: \' W2 b' ^4 a) a/ Z
$ b5 w: ~& Y; t" I& pApp Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
; m6 L7 `* G- [( T9 g
1 a. a! n" P& L# E3 kApp Task UserIF任务 ：按键消息处理。
! S) L2 [. V+ l" t. t/ i
% c8 f+ O- q- ^" j+ l* eApp Task GUI任务    ：GUI应用任务。
8 _5 e, Q$ v* M+ f! Q! N5 V7 s9 i
App Task STAT任务   ：统计任务。

App Task IDLE任务   ：空闲任务。

: a/ L! W2 L9 z. @GUIX System Thread  ：GUI系统任务。

7 ~! ?( W/ I: v" t2 n, sSystem Timer Thread任务：系统定时器任务。

- C) F& {& v8 `- P' ]实验效果：

" T, A* d2 L/ f" @2 C# \
GUIX Studio的界面设计如下：
! Z, R4 h% }( B% K5 q' b6 w+ k
! I' w, [; e+ T6 ?' n) Q

. \7 ]9 R5 c. s4 r4 k+ O
串口打印任务执行情况：

IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
2 A$ T+ J% Y7 x* ~0 ?' Q( v3 O! S

& }* y7 ?  R3 t. a" \8 N5 B' S& A
Embedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：

: k4 n9 v2 r2 Q  M; ^& \/ C

# t) a5 y$ @* B: @7 c0 K展示里面有乱码是因为Embedded Studio不支持中文。

9 I$ v% h4 M" _/ `& n& ~13.6 总结
本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

  ?; V; g- C2 ^" ^1 E



( Q# E) j; A+ T5 \3 \