13.1 初学者重要提示
  j- f) D$ X# I8 R  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
- @* n; h  ]4 Q% ]' q13.2 GUIX Studio设置窗口回调
6 V# x' m1 [1 U# XGUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。

新调整的界面效果如下：

4 i' Y0 V  s+ [, D# h: N8 F( [
  W8 b( D2 k/ W' R4 T文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。
% B. e$ F* y5 h0 I8 I5 ]1 M
下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

6 G) z% i( F8 X2 F
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
0 _# ?! O/ J+ W6 C- X9 O
13.3 GUIX的2D绘制实现
4 e9 Z/ s" {* `' Q在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

$ ]9 G, {! ^( e8 T7 h) p+ W9 S13.3.1        了解2D绘制函数
* S; Y3 m, p/ U; u: M, F: QGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
9 `- k% q# d) h3 n( o1 e
/ [9 l' c* D; z, S+ G

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

* h" T+ @. c! ]3 e* r9 N+ X4 \8 |( H13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
& ?# g" {; ]! N! i! z, \+ _* k9 k

$ C3 _8 L3 Z5 {& l
Brush画笔主要定义了如下参数：

1. typedef struct GX_BRUSH_STRUCT
   . ?) l9 \: p6 i1 j
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   . n. j9 x# c, z: n% v# J3 ~
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   - X& _( G: m% o
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   ! D+ J7 @5 i" `" a  y& K
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   5 |; w+ Y4 c+ t0 V/ l& }& s  {
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

, d* z( |* s4 y6 w其中画笔样式成员gx_brush_style涉及到多个参数：

& v8 Z0 T  s6 q7 P$ n( _  Q8 s

1. GX_BRUSH_OUTLINE
   
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   
5. GX_BRUSH_SOLID_FILL
   ) c9 k, p) P* b/ d( m' I7 C
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   
8. 
   
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    ( V' u' k' p7 D, ^5 ^
11. GX_CANVAS_VISIBLE
    ( `$ V: l. T4 I# n1 s- ]
12. GX_CANVAS_MODIFIED
    2 O) S) O% J8 O2 s- U
13. GX_CANVAS_COMPOSITE

复制代码

这里将当前用到的三个样式做个说明：
) ^. O% W' i: A# ^5 c5 D: u. `: H
  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

; @" v8 H; t; n) K; \5 Z& O  GX_BRUSH_SOLID_FILL
& z+ @  [! O( h用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
1 ~3 p# s6 H+ o
/ r4 Z6 W' K. T% ~4 A$ s5 B2 R  GX_BRUSH_ROUND

+ `- V% L3 x; u用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。

( F* C. R! @  ?% H) g# C13.3.3        窗口里面做2D绘制的基本框架
  R3 N0 u7 _6 x窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：

8 a. Z' ~7 C) g$ ~

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   
4.     GX_CANVAS *mycanvas;     
   : U2 b+ g3 n  m  \/ E! O
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
   8 [. R1 Y: V9 D
8. 
   0 u6 ]$ P: j- ?8 E7 L+ w
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    
12.                                 y0,
    1 }, _) R7 ], C, t2 p' h4 v7 y
13.                                 x1,
    ) M- [7 ]* V  @/ ~
14.                                 y1);
    
15. 
    ( E4 {' |0 ]- u, m$ p  g
16.     /* 返回窗口对应的canvas画布 */
    
17.     gx_widget_canvas_get(widget, &mycanvas);
    - n4 @8 I4 K/ D
18. 
    8 g) I( B' \' e2 e6 L
19.     /* 在指定的画布上启动绘图。*/
    
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    2 R) r# n3 ]8 H, ~1 y- V  }  t$ U
22.     此处添加代码，调用2D函数绘制
    5 r( k  P& `$ R3 \) K" e3 }- L$ @
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。
- i& G' w9 l( C' C
: }# d1 n8 ~4 c13.3.4        窗口里面2D绘制实例（重要）
/ L3 e8 m* {3 V6 `实例代码如下，本章教程配套例子也是用的这个代码：
9 e' y# Y! s2 G) y: Y) G$ i

1. /*
   + C: K' ^( R" A) `" y' ]4 h
2. *********************************************************************************************************
   2 }4 w1 @3 t# C
3. *    函 数 名: _cbWindow0
   
4. *    功能说明: 窗口回调函数
   8 H4 r" J/ K7 U+ o! o! F' Y* W
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   ; P6 W5 b, n9 p, `2 Y
8. */
   
9. VOID _cbWindow0(GX_WINDOW *widget)
   7 C2 g6 O" Z" A6 e! ]( B; _; A: e
10. {
    
11.     GX_RECTANGLE drawto;
    9 G  v0 }/ d) L
12.     GX_RECTANGLE tempdraw;     
    ' _5 n2 J- |7 m+ @
13.     GX_CANVAS *mycanvas;
    
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    
19. 
    ; n1 E! u) {7 [! v1 T; C
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    * i5 x- Q8 y4 v$ O
21.     gx_utility_rectangle_define(&drawto,
    " {% q; ~( N1 w6 ?; C
22.                                 10,
    
23.                                 100,
    
24.                                 400,
      D7 S' K, T) r' {# S: y, h0 M7 M
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    , J' n& m) P# r. ]4 s
28.     gx_widget_canvas_get(widget, &mycanvas);
    ( s# e5 F( _# q8 v1 ?; p! P, O
29. 
    ( g( ^  t2 j8 E. I6 g" x! x
30.     /* 在指定的画布上启动绘图 */
    ( o; F' q) z7 j4 M
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    & K- V! g5 V" k5 }. m5 X
32. 
    
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    
36.     /* 设置笔刷填充的颜色值 */   
    . X( Q! k# ]6 `5 a
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    . V) z5 c: L3 [7 @; a
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    2 Q) b9 j1 P: J: [! M+ [
41. 
    
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    
44. 
    
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    8 ]6 k& l/ o8 n+ a
47. 
    7 K% G5 K9 ?  o/ M0 b
48.     /* 绘制圆圈 */
    6 u* _% v( m- [& Y9 P8 H( q
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    
54.     /* 绘制多边形 */
    # v. ?$ l- Z/ C; z- L' ?
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    
57.     /* 绘制矩形 */
    
58.     tempdraw.gx_rectangle_left = 30;
    1 h' y9 A; X# f/ g, z7 I" n
59.     tempdraw.gx_rectangle_top = 210;
    / |$ s' v# V2 }0 ]2 P9 h! C
60.     tempdraw.gx_rectangle_right = 100;
    % Q' C! ~  }% q: s( k- \6 y5 N
61.     tempdraw.gx_rectangle_bottom = 260;
    
62.     gx_canvas_rectangle_draw(&tempdraw);
    / x- v' W# a/ d5 g
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    1 Z& {& d2 X# a
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    & G4 c8 N3 O& k' B4 w+ V# y7 F
66. }

复制代码

  gx_window_draw
3 f) _1 {- r* b* m; Q( K" t
# a8 A/ t$ z1 V$ ~, }7 U# [  W+ I作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
3 q2 _6 q1 L  C! F! q0 k; ^
  gx_utility_rectangle_define
/ B1 x! S- w$ z4 R2 S( s* K
) U# N+ a6 L5 k1 G) v* Y1 M3 J定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。
) q1 V9 \% e8 @& o: }6 X
  gx_widget_canvas_get
& c/ m- U; a0 i! [
返回窗口对应的canvas画布。

  gx_canvas_drawing_initiate

在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。

  R. P' ?% N+ Q  gx_context_raw_line_color_set
' ~/ A' [+ e$ }8 A4 {
; X) @- R/ }* h- t设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：

) S. K; x! S0 b" _7 S9 Y
& z" h' P! e# o# Y# _, m  gx_context_raw_fill_color_set
, y) Y9 L. E, n* r
/ H6 f$ Q- o. T! }( L1 b8 O$ j设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。
* R( ^4 C1 K6 H9 }0 h9 L
  gx_context_brush_style_set

" t! d% ^/ W" y) s用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
* Y& b' L) E  V/ s5 \4 J( K1 P
% x& c9 g6 \7 e1 e8 o  gx_context_brush_width_set

用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。

  }7 I" b, R7 C& C* _3 u  gx_canvas_line_draw

0 G5 M: o; X) ]* g' `! O直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。
; ?  h9 _/ K' \) @! n6 A
  gx_canvas_circle_draw

圆圈绘制，坐标含义同上。

9 z  U9 B% E/ K; g6 U  gx_canvas_ellipse_draw
' j+ L8 J( z* \: y椭圆绘制，坐标含义同上。
# H/ E8 {$ v& ?( P; A- H- H
) x- j: G: v0 T  gx_canvas_polygon_draw
多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

  gx_canvas_rectangle_draw
8 T' k5 q2 }* s2 y& S: g# o; Q矩形框绘制，坐标点含义同上。

  gx_canvas_drawing_complete
2 ?4 H6 c" |# h8 A$ [用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

' n, }5 e8 i$ S9 _) o) g0 h13.4 实验例程设计框架
8 u. A6 A4 J! [! s7 o; [本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
1 H! F0 `* ~5 h

13.5 实验例程
& S0 H% m6 }# t+ X# R（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
7 V% }# N( c, m  w/ W8 I" ~
0 }; S1 t' C' R- i3 `# |; L配套例子：

1 ~( R+ I" S% e' s% a2 L6 ]本章节配套了如下两个例子供大家移植参考：

( \7 Q. s! O; c  B  V7-2011_GUIX 2D Draw

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
* n, r4 U% j1 k1 @/ R9 Q
: W- k3 J( i  ]. _$ U  V7-2012_GUIX Studio 2D Draw

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。
8 p6 b8 G/ E- V# ]0 l/ \. }3 y2 Z
实验目的：

本章主要学习GUIX的2D函数绘制。

6 ]% X& b, p& l1 q8 M1 E# L实验内容：
& }) A: ?7 t. g5 _. b* `- |0 b
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
8 _0 a) b9 o+ q8 g3 \; i! eApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。
$ B6 h" Z/ Q/ C
* R: T9 y: k- z- U& |- c+ }App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
0 n" F" I/ `3 j+ A" n5 @4 R: G+ f
App Task UserIF任务 ：按键消息处理。

- j& L! r. D' V5 l: J9 YApp Task GUI任务    ：GUI应用任务。
5 X* `$ }& V, J6 U. d
" h& y/ _- [' u3 [App Task STAT任务   ：统计任务。
; j% }, G, F9 c' T' T. W
4 A( d; I! N. B( W6 z- vApp Task IDLE任务   ：空闲任务。
+ K+ n0 E, |2 x9 X+ ]; q$ y3 Q
6 s1 w- p" n+ _3 Z: r$ Y7 P, h1 |# IGUIX System Thread  ：GUI系统任务。
5 X/ v5 I) W' f& u- o+ R
System Timer Thread任务：系统定时器任务。

实验效果：

2 p8 C+ g9 n+ b- s5 T) [4 l. p6 G- O

GUIX Studio的界面设计如下：
4 Q- u/ }; f6 b

+ X& C3 E& {! s
串口打印任务执行情况：

! B' a+ N& v- S2 T/ X) m# u! QIAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
, q- l1 w/ e; j& w+ R0 Y$ t$ m% n" q

9 D9 m$ [6 J$ ~7 R; L% qEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：

0 Z( C8 z8 V6 |! K9 h展示里面有乱码是因为Embedded Studio不支持中文。
1 w! k, t' A8 X/ e
13.6 总结
/ ~) b' o; c& H% r本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

" u3 x' \# o8 `
& A3 m/ A1 J  B7 }/ o8 O
9 t) v) Z8 r, d  K

4 ]" m/ Z+ F8 A& ]/ R  e& ~6 h