13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
GUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
* i4 m/ f* M# t2 E, ^: T) I
1 h0 ?7 V( T8 h, ]6 ?- E! q新调整的界面效果如下：
$ I2 x8 c4 Y" I; z

- X/ b# [$ e( G7 n# A( V" o
文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。
. C1 o9 @3 Q6 A1 v
下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。
4 a6 v) N7 u) S3 K
) @& |' V2 Z; ]" ]% k7 o4 }, x) r4 K

7 H1 o1 p) d& n* F* \- C4 t
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
/ j0 f$ `$ ]: A
0 J! |* e1 i2 g; i: _13.3 GUIX的2D绘制实现
0 q/ C6 {( h. ?( W/ r! v) w在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
9 j5 b& z  m2 P/ |' Q

( B* ]7 `6 }, Z5 m: D
) t: b$ n4 R0 T% a" y: k这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。

# H; X5 X$ M, {1 ?: b9 f+ P4 R% M13.3.2        了解画笔brush函数
- \6 g2 r4 d* i$ `2 g3 g- T画笔函数在context相关的几个API里面：
: n8 q- q& Z* o+ Y8 a" G
1 `6 M3 r% e: {  T  _

% @, Q& t' D/ R+ ?
- W) d: N4 E) W; n( h1 V0 j( dBrush画笔主要定义了如下参数：

" M1 K4 |$ m& O+ `6 K( b

1. typedef struct GX_BRUSH_STRUCT
     W6 R6 v& ^4 i- w9 f# ]  p
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
     J% u" Z  Y- n! t
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   + ^; K' A7 Z: e
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   3 M/ A2 O! b# W: K
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   6 Q9 O$ B! x& `2 r, R- y5 |
9.     UINT         gx_brush_style;               /* 画笔样式       */
     B. }" V( r# D( y. x- P; W
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

其中画笔样式成员gx_brush_style涉及到多个参数：

$ q1 }4 c+ |3 S( h7 p

1. GX_BRUSH_OUTLINE
   $ x7 x" o5 O1 v; X1 W
2. GX_BRUSH_SOLID_FILL
   0 w3 q- k1 m# a; Z
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   + u% K% q. D6 t$ j* U- @% z
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   ( \2 d0 F" u5 U
7. GX_BRUSH_ROUND
   
8. 
   2 W9 f% M5 r1 d7 u. S" J: H& n: A: d
9. GX_CANVAS_SIMPLE
   ; ^- M! s/ f) K% c9 @: `
10. GX_CANVAS_MANAGED
    1 X" d+ t6 u' Y% k' [
11. GX_CANVAS_VISIBLE
    $ l! `. j5 H1 F
12. GX_CANVAS_MODIFIED
    " t6 B# T) Q5 J1 y0 u
13. GX_CANVAS_COMPOSITE

复制代码

1 M, k( e; W; i' \  A5 e这里将当前用到的三个样式做个说明：

* }* J& \" i) ~; j- L  GX_BRUSH_ALIAS
+ [6 ?" G' A+ E2 H  ]% \4 s/ R7 [用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

  GX_BRUSH_SOLID_FILL
9 ?) L/ F" l1 K2 k) U! V* F( ]用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
# Z# |3 U% E: H
# i2 m3 V! ?8 x8 I* w2 g  GX_BRUSH_ROUND

用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
3 `; q8 p1 R, Z6 N) u& [
13.3.3        窗口里面做2D绘制的基本框架
4 p( I3 f& t7 L+ ?7 G窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：

) V$ u7 @) D2 s/ Q

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   % }) F' z( I, @! P- h5 h6 B$ j3 m" @4 c
4.     GX_CANVAS *mycanvas;     
   
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   & H9 f# T3 k# r2 Y3 s
7.     gx_window_draw(widget);
   
8. 
   + B$ d8 c8 v+ K' y2 }
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    8 U/ V  l' m# _7 G$ Q) y/ b2 ~
11.                                 x0,
    $ k! r+ r8 j9 ~+ t1 ^1 o+ `
12.                                 y0,
    4 |% h- g) I4 R
13.                                 x1,
    7 H$ k; Z: p. `$ P' y/ p
14.                                 y1);
    
15. 
    
16.     /* 返回窗口对应的canvas画布 */
    , Q) t0 u; B5 Z& n
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    
19.     /* 在指定的画布上启动绘图。*/
    : ^5 z+ I  J  A
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    $ l) ~. U0 _+ u$ s* P, \- H
22.     此处添加代码，调用2D函数绘制
    1 a9 v% H0 P, o$ o
23. 
    2 D  N4 I+ o' b5 V
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    2 r) o. E7 w4 t( @/ i2 l+ ?
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

: k: i1 t9 |( w$ Z! @) V这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。

; \/ x- \. f. g) y, h" O/ _13.3.4        窗口里面2D绘制实例（重要）
实例代码如下，本章教程配套例子也是用的这个代码：
0 {2 g1 Y1 O+ A# t* q9 o7 p
4 w# F5 W% @7 @8 ]4 `

1. /*
   
2. *********************************************************************************************************
   / u5 F) _. W, |7 [+ E
3. *    函 数 名: _cbWindow0
   # x! T% g2 p1 X* s
4. *    功能说明: 窗口回调函数
   6 c+ m* ]9 s% ?* l
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   
8. */
   $ z# q! ~- l" d" {) s
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    + v! }/ b+ P- S/ `2 ]9 N  n2 Z
11.     GX_RECTANGLE drawto;
    
12.     GX_RECTANGLE tempdraw;     
    ; W! J# G; V+ e5 g
13.     GX_CANVAS *mycanvas;
    1 A) W6 `  @. S( l/ Z5 l7 g! i
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
      j6 B* @5 [0 N# D1 [1 ~3 {
15. 
      k0 l3 ^) V/ Y2 s% p* E) q
16. 
    ; n; ^  A/ p* `( ~( U
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    - P2 `, y* o/ \. s6 h
18.     gx_window_draw(widget);
    8 K5 `* Y; t/ e$ P) v" x; ]: h
19. 
    ) C5 o3 C4 {( [) f
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    : O3 D4 Y: {2 D$ I9 ?
23.                                 100,
    
24.                                 400,
    
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    8 R" \1 V/ V& S/ a$ e! S
32. 
    
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    * H2 ?$ n: X3 q6 `
35. 
    5 K5 I1 [, ]0 m* [; [: G4 F
36.     /* 设置笔刷填充的颜色值 */   
      c) E# }) x7 E4 f+ I' K! w% Y
37.     gx_context_raw_fill_color_set(0xff00ff00);
    5 t+ J% I- `( G6 E
38. 
    
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    1 L$ v# S+ |7 @
41. 
    
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    / |3 z- J: b0 a* L5 E
44. 
    4 n6 |) a# S, V$ o9 x
45.     /* 绘制直线 */
    2 ^2 F7 A& S8 a% k% g
46.     gx_canvas_line_draw(10, 100, 50, 150);
    7 C1 H% o5 B3 O2 R7 u0 x+ X/ S
47. 
    4 \1 u# h% {5 m" e! B. j- U
48.     /* 绘制圆圈 */
    ; d! v; l' o! [; z/ o2 y( O, V2 |
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    
54.     /* 绘制多边形 */
    5 o" w' ^  q) f6 E% r
55.     gx_canvas_polygon_draw(my_polygon, 3);
    * ^. O9 t) A- U
56. 
    
57.     /* 绘制矩形 */
    
58.     tempdraw.gx_rectangle_left = 30;
    
59.     tempdraw.gx_rectangle_top = 210;
    
60.     tempdraw.gx_rectangle_right = 100;
    
61.     tempdraw.gx_rectangle_bottom = 260;
    
62.     gx_canvas_rectangle_draw(&tempdraw);
    " r% b8 h  u- j  `
63. 
    ( k9 }4 l3 x. O$ x, N( Y
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

/ F9 S- w( f" l- |% Q  gx_window_draw
7 m3 L( M6 M3 y3 s- k, g9 `
作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

( }7 ~: o! i& r, ~$ V$ \2 y' g  gx_utility_rectangle_define
/ |. K( h% Y% v: N! s5 `  L1 w: n! Q/ G
2 }+ _0 P2 I& h定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

) I3 D  t+ q; J# Q/ A4 E  gx_widget_canvas_get
# B, o: U0 u) g! l/ T
- v) A  g. j# P8 T: {8 ?2 M# m返回窗口对应的canvas画布。

7 J5 |( t: ?+ U* o3 [3 I* J" a  gx_canvas_drawing_initiate
: f+ h5 W4 V' t8 x  R
在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。
! W- I2 O" F( h( w
2 }% z5 i2 r3 |7 v) W2 d5 Z6 H  gx_context_raw_line_color_set

设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：

* g  @2 d' d2 H+ g) B" \& i

# v2 u1 e7 [% F. T+ _; u, r( l
9 }# j: }) e, `2 }7 N! h' @% k- O  gx_context_raw_fill_color_set
% A$ D& a/ w, n" r: b
, C# o, ]; R4 s3 Q3 p: |设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

2 G7 m: N; N7 ?* z- f1 K  gx_context_brush_style_set

& ^+ I1 [7 e1 @: \% L& `% B4 X+ P用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
" g# u0 f  W) A3 O$ _$ N
$ k$ C' P1 D8 X/ h7 F5 T  gx_context_brush_width_set
, |. ]9 \( m: P4 a' E; r/ ~
2 L3 G' n; q8 @7 S6 M2 o9 _用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
- I; J/ V3 W/ k9 x! R
' f6 A$ |/ S+ b, v7 {4 e( ^# t  gx_canvas_line_draw
' T% {. A$ N! u: S: z2 \
* p. O( [" {: d/ S% E2 U6 t5 ]. t直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。

  gx_canvas_circle_draw

圆圈绘制，坐标含义同上。
& d% r6 t1 _5 B4 I3 s* @6 v7 w
! f" R! B; S3 @3 Y  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
* f+ l" H  U- b$ [0 w$ x
/ C5 |4 H1 C9 t6 A7 \  gx_canvas_polygon_draw
* e4 G& q# l# C4 e多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

  gx_canvas_rectangle_draw
8 P; V) S- d! X& m矩形框绘制，坐标点含义同上。

. d4 L/ n. G$ I+ ~: l. y# Q. Y  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。
/ Y, w+ A) V3 E; {5 |4 u/ _) j
# Q7 n3 G. Y5 F: y4 w$ Q( H( L; J针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

13.4 实验例程设计框架
3 i. s& i! u% d% l- q本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
0 ]- Y1 n4 ?- C4 A

6 `% M8 }4 d* N4 N% R4 z# q
1 `/ @+ L# f0 ^13.5 实验例程
4 s- h& m5 s+ W（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
% u' Q) H0 @1 ]
4 J. ~' k4 ]# u& b配套例子：

本章节配套了如下两个例子供大家移植参考：

3 l; F5 v" Z2 A7 ]% B  V7-2011_GUIX 2D Draw
  D& p+ c: f! _2 }+ I$ X# b
GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
' n* R( j/ t- E
* G9 I; @! u+ e4 B5 R  V7-2012_GUIX Studio 2D Draw

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

7 [; t  u$ J/ |' P实验目的：

本章主要学习GUIX的2D函数绘制。
7 m5 A" L. \& ^0 a! @2 L
; a; l" o* D7 U' ?+ \  [实验内容：

2 k6 O' j( y" H- N, s2 Q共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
! ~) K! k- Q; tApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。
, m' x! T/ w* v$ p5 j, S9 k
/ _9 k# A! i% r- {7 P5 v' [App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

App Task UserIF任务 ：按键消息处理。

App Task GUI任务    ：GUI应用任务。
$ P8 G+ K! L- Z( r1 c. G+ l
) e" D6 s4 `  o4 W/ _App Task STAT任务   ：统计任务。

App Task IDLE任务   ：空闲任务。

" s0 v. L( B8 I  M8 Y- y# k% FGUIX System Thread  ：GUI系统任务。
7 L/ B) F* u9 Q& a
System Timer Thread任务：系统定时器任务。
# m# o" N" i# J( X6 O
实验效果：

9 {$ D& U2 ~) z# q. D( {; }- P. ^
6 v: v$ j9 f* I* j/ p) vGUIX Studio的界面设计如下：

( B# G, t0 W- b9 R' x* f; J

( {  c+ Q" t" U& v7 |6 o7 ]
串口打印任务执行情况：
# c' m; P2 k( D8 R: ^7 x
IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
+ V3 e; j0 C. g: y

4 {2 G. A$ T5 N. w; `3 G' F: o
Embedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
2 @1 H& t3 d/ R  ^
( c! _/ A3 ~4 w" }2 L

6 _" k( g) S! Z, ^
展示里面有乱码是因为Embedded Studio不支持中文。

  b) y3 ?- A# ^8 I) F# r% R13.6 总结
# n& r0 p/ I  k' ^( F, U7 v本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
6 h1 \. J6 D3 ]! R! d