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

新调整的界面效果如下：
. I3 w( t$ _# e/ M; ~. ~

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

- V" Z- y. u. k! R: V8 n/ p) u下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

2 G0 P) s4 r2 k# ]& I, D
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
5 X! f+ \- R) X% }$ T3 h( C  W
13.3 GUIX的2D绘制实现
, {/ Z- l! Q+ |) s; W) w6 u在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

5 X6 ]9 z2 l; e. i13.3.1        了解2D绘制函数
  Q2 ~% Z. y' V0 j0 g, P. k7 iGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：

5 n$ a# j' g5 W1 s, L6 Q) }  c

+ a) L2 G7 i* N# V
% R7 O' }# K) P3 A9 ^; ]7 {, f这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
; T4 q* h( Y: U( o( M* u" L
13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：

' y& x% z' c, J) g/ K' U

) H. ^' F  |- N$ IBrush画笔主要定义了如下参数：

4 h; l; b, g9 S% c# i* `

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   % _. V; U; t/ K7 ]1 W
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   * [2 k, v0 k% x' j7 L# i9 m0 D
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   % M" D* ~% V  U5 |0 F, h- i
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   " O$ T! n1 q% T8 |+ v/ e) C
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   , M3 L* p0 W" R5 I2 d' ~  [  o
9.     UINT         gx_brush_style;               /* 画笔样式       */
   " _( p$ z6 E2 O- F5 k( M3 a8 O2 k3 t
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

其中画笔样式成员gx_brush_style涉及到多个参数：
6 J0 U" L: k8 z  v- @, ?3 w! [

1. GX_BRUSH_OUTLINE
   
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   ' V' Z- l0 D2 u) d/ T; Y0 e
4. GX_BRUSH_ALIAS
     j5 [' w6 k, Y
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   
8. 
   
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    2 m8 H: P  ?8 Q  p1 V% @* J
11. GX_CANVAS_VISIBLE
    / ?% C+ z4 h: X8 n1 e
12. GX_CANVAS_MODIFIED
    
13. GX_CANVAS_COMPOSITE

复制代码

7 c+ ~' \% q" y! J2 T. D这里将当前用到的三个样式做个说明：

* {" f9 l; V5 y0 G# T  GX_BRUSH_ALIAS
: X5 P4 o% i4 o& C) ?用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

  GX_BRUSH_SOLID_FILL
4 ], o! h0 L& F4 v0 Z7 e用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。

% S1 K1 d! }0 T1 R! ^  GX_BRUSH_ROUND
) i1 |! i- y" @2 N/ [8 z
用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
* b& L" T7 V% u# e4 z3 w: d6 S, B  p
13.3.3        窗口里面做2D绘制的基本框架
$ _$ y4 N; E8 g1 X* c2 ?窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
1 p' U) A& N9 q0 Y
2 l; n8 m; W" N4 w/ V. u) b9 }

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   5 d$ S0 ~/ {3 _2 {
4.     GX_CANVAS *mycanvas;     
   
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
   
8. 
     Y) v: `3 K0 G9 Q4 j
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    
12.                                 y0,
    
13.                                 x1,
    ' B  N7 I2 t. |4 \
14.                                 y1);
    ! t. N2 u6 D* I) M
15. 
    + b9 V% ~3 T% t
16.     /* 返回窗口对应的canvas画布 */
    
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    $ L2 v. F2 o5 C" ]+ a2 L3 m
19.     /* 在指定的画布上启动绘图。*/
    ! F. E5 `7 ]* q4 K$ ]& [% h" e
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    3 n1 z6 \# i" G
22.     此处添加代码，调用2D函数绘制
    
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    ! [8 C1 I6 u1 p8 n) C& B3 U8 G
26. }

复制代码

/ g& T! W3 e5 z/ `2 L! |这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。

6 h* t2 z! F4 a0 [# {13.3.4        窗口里面2D绘制实例（重要）
1 j5 ]( d; q* o" }+ v6 T. k实例代码如下，本章教程配套例子也是用的这个代码：

+ |9 e& d' w& }% _' H. G$ B- M8 d; a5 j

1. /*
   3 T$ W# ^0 ?+ \" d9 \- M' u
2. *********************************************************************************************************
   ( g2 t6 {, ?( v  x. K
3. *    函 数 名: _cbWindow0
   
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   ' n* M8 V( ]8 E7 ?( w
7. *********************************************************************************************************
   ; c0 \3 v+ b2 g1 n
8. */
   
9. VOID _cbWindow0(GX_WINDOW *widget)
   6 O9 \& K$ H' O% c& Q" m
10. {
    # n) J" f& l, @# |! z  {  a, a2 ~
11.     GX_RECTANGLE drawto;
    0 g  D6 o  D" n! t
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    ' w$ R8 Y& {3 I6 ^0 M/ s6 q
15. 
    : q# t; b9 K& \, V6 a
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    0 I+ w& k" L4 N" u! l$ m; \1 m: d  m
18.     gx_window_draw(widget);
    ) n7 ]& l; f! A( T& c* `, k
19. 
    . g8 ]0 _/ B0 U, E' K3 J
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    ' o* U6 _/ [* _% w$ q
21.     gx_utility_rectangle_define(&drawto,
    ; M0 x/ T) w0 q! I$ o( {( ^" n
22.                                 10,
    & G# q) u* V$ B  n7 M
23.                                 100,
    
24.                                 400,
    
25.                                 265);
    7 A+ \& y" v! Y
26. 
    * {: p: C( f' L, o& p* n+ l
27.     /* 返回窗口对应的canvas画布 */
    ! F& R# |' ~: N6 x! j
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    : A0 W" p" e1 S# I% F2 i
32. 
    
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    & `  j" C! `$ g2 W6 p% R+ J1 Y4 P+ M
36.     /* 设置笔刷填充的颜色值 */   
    
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    ) w, T& n9 U9 H
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
      ?0 u0 o# [/ S% P4 L
41. 
    
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    
44. 
    
45.     /* 绘制直线 */
    : [/ o, I5 L3 N# k
46.     gx_canvas_line_draw(10, 100, 50, 150);
    
47. 
    
48.     /* 绘制圆圈 */
    
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    , D1 C! c% l' u: j$ V2 a2 T
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    2 F! M; c: T1 w6 v# j
53. 
    2 A8 P& ]5 m+ v# E4 L
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    - {5 k( T: D. }# o
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);
    
63. 
    ! t4 A7 d- M5 a1 m8 h
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

  gx_window_draw
2 u% a3 L6 D: k/ i
作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

  gx_utility_rectangle_define
8 N6 E$ L% _: R
定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。
1 y, q' Z! T7 C/ ]
, a  ~; ]  k% g9 j+ ^! e  gx_widget_canvas_get
2 p5 T4 F2 I: s, l
5 w  p: M: `& f3 x; s6 _返回窗口对应的canvas画布。
* a  ^8 _1 |6 y5 Q6 [8 E. D
# a- r- Z5 X1 b; H  gx_canvas_drawing_initiate

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

8 `; d: e% P8 T% L) F  gx_context_raw_line_color_set

0 f. u2 V; g' f& B& R6 u: G设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：

6 s1 X: [* _5 E. e  [2 y1 q$ k

" ]% C( s! z! E3 {1 h6 B9 @
& ]+ O, O6 o1 m! Y3 b$ b1 H  gx_context_raw_fill_color_set
- q4 d# K- \, C4 @% h3 w
设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

! B/ P! \" D8 f5 Q: }5 Z  gx_context_brush_style_set
" }$ w/ s2 h( P/ j9 T$ q9 E
6 O/ O7 s+ s- Y" p- l8 r) x' x用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
" }( z9 n+ {4 @1 L$ {5 P
, @) B( }% Y& q) O9 Z3 D/ i  gx_context_brush_width_set
1 w. B; \: N! m7 ?2 k4 J9 l
用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
8 b' g( W* G. \4 y6 c0 D) S4 O
  gx_canvas_line_draw
9 S+ ^( G$ K0 s. c& H5 q
* V- W, N: m! Y* W4 v直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。

  gx_canvas_circle_draw
5 g" b0 e6 [, ]+ h/ M
8 L6 a/ w. C1 V3 v3 Y. c圆圈绘制，坐标含义同上。
$ t1 K7 C- _/ F8 w  u4 v3 i% z
  T/ n. P" ^# P, i, |5 G  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
3 t# M" L8 ^& t5 v  X, X# S
$ I- H5 W' I+ t  gx_canvas_polygon_draw
多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

  gx_canvas_rectangle_draw
" I  i: G/ ]0 V+ @( I矩形框绘制，坐标点含义同上。

  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

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

13.4 实验例程设计框架
( e- `) }. O  J( D本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。

) J( p9 p! g) T. m! v* _7 g2 U3 S

13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
1 o% k  q# z3 e
配套例子：
: u( e0 C2 A7 H- e0 ^
# g, G2 i8 Y. u, \8 {2 g- O+ t本章节配套了如下两个例子供大家移植参考：
3 i2 H- ^$ g* F3 E8 `( M% i  g
# t5 o, E% D& R+ _  V7-2011_GUIX 2D Draw

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
5 f) p5 b- w  `+ Y
' T. E$ ~* B+ z4 |  V7-2012_GUIX Studio 2D Draw

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。
" z0 s* s  {/ D% a* I, v  l
. f% y# {1 q1 I$ P' n8 k实验目的：
  M" v$ f. ?' z; u+ L' O9 A
本章主要学习GUIX的2D函数绘制。

! B0 \& X" \6 }8 |2 I9 w实验内容：
- A; v  m) r. j8 u2 x6 Z
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。
; @' w+ J, x8 {6 W7 n' i) z
App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

7 O, \' \; O2 A% T& W3 |: lApp Task UserIF任务 ：按键消息处理。
- P1 C1 Y# k% _+ p/ X% v
App Task GUI任务    ：GUI应用任务。
* @' {  M& i$ L
App Task STAT任务   ：统计任务。

0 G  ?/ M& P! c/ d, j: UApp Task IDLE任务   ：空闲任务。
3 r' `' q; W& _/ k- Z% ~
GUIX System Thread  ：GUI系统任务。

System Timer Thread任务：系统定时器任务。
" A0 f3 S/ p* O: v3 t; S8 z- X; h
( b% K5 Z% V9 Q实验效果：

, S# l% i0 i" Y; G5 y1 S

* t, h# G1 _0 \8 ~
7 e  U$ z* X7 }  q' F1 G6 `# ]9 MGUIX Studio的界面设计如下：

( z* i) V& R5 Y% x串口打印任务执行情况：
" X. u3 f" x; y3 `; {
IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
& d. V! z$ x. S3 \" d7 a
% T0 E0 P2 |# `$ @  @

Embedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
* A" Q5 V2 K; J3 P( {) E- B
( ]( o. N* S  Y# _0 ]

) U1 U) u6 s6 x6 @) Z  \
" z/ D' |0 q9 W; F展示里面有乱码是因为Embedded Studio不支持中文。

13.6 总结
本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
- s* ^7 ?' J0 H
- G9 h4 R3 e# [5 k
! k+ F9 [' ]$ G
$ l# `+ G' ]3 n/ s