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

新调整的界面效果如下：
" J0 g) v8 I5 o- Z6 T3 h% h5 Q  m( D

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

7 ?, \3 m) K5 [4 g4 B2 @下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。
# \9 `, w( t4 X

6 U- p0 M3 T7 q1 w# T5 [; j这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
+ M( S8 r! k3 N5 `4 F: U0 G
$ }& ~: q1 X: G# b* D% h13.3 GUIX的2D绘制实现
- p) f) v. m- U* a在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
1 e; Z+ V" x/ Y) Z( E
& T7 k. @: V8 D5 B) c1 A13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
7 h# D, a: x/ r4 C$ i3 f* E6 A
9 d2 ^; s1 q0 L) e/ X7 E

( g1 d# s! j/ K- g1 [) s这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
7 k1 O- |) `3 G( R
13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
) ]+ [; Z5 T' m6 K7 U; i- B
3 n2 F! ?; [! O/ L

9 G2 A1 f8 k  ^; ]& jBrush画笔主要定义了如下参数：

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   0 q: W/ y; u  L; p9 w
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   : l% q! ~& o" _3 S
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   # [/ d% l- M  |1 {
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   5 T* x6 \- {% M0 v2 w- g. G9 Z4 Z
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   % i" q' Q; m  i' B" s
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    " D; U& s: a' @# w. U
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

其中画笔样式成员gx_brush_style涉及到多个参数：
: Q2 e5 r7 x" @" E) e4 u9 s
% `+ H2 S6 G* ~; V

1. GX_BRUSH_OUTLINE
   - ?& b& Z) }$ b5 m/ u! l2 Z0 W
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   ! A) Y( ^1 P+ L
4. GX_BRUSH_ALIAS
   
5. GX_BRUSH_SOLID_FILL
   5 H8 I1 W1 i2 P" ~+ s
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   # a% `( v) T9 z' {* t- p+ i
8. 
   5 p% u/ K; p% @7 U- z! ^
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    + @+ o2 e7 e! w& {
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
    / T; D- t' {9 Y
13. GX_CANVAS_COMPOSITE

复制代码

2 a: \; `' @! v这里将当前用到的三个样式做个说明：

  GX_BRUSH_ALIAS
7 l9 F) {, R. p. B/ X: V% z" d: l用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

# q% b! w4 b  D% q! V( {  GX_BRUSH_SOLID_FILL
用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
4 Y3 m5 b* k: E) o
  GX_BRUSH_ROUND

用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
, Z- I2 l1 Q  l% _
13.3.3        窗口里面做2D绘制的基本框架
+ a- ]  a" J* _窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：

" b! r$ t$ B3 c0 l5 {/ i9 x; \

1. VOID _cbWindow0(GX_WINDOW *widget)
   7 K6 Z) Q# z  ~+ f" v
2. {
     h5 ~) @6 b" N: R+ L
3.     GX_RECTANGLE drawto;
   
4.     GX_CANVAS *mycanvas;     
   
5. 
   2 E1 f3 D! [' U2 b8 @. x
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   / B" d. a# U9 @  w" h/ i% m& U
7.     gx_window_draw(widget);
   . ~* }( y. t! P2 c3 }
8. 
   4 ~6 q" [, W( [& a
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    9 f( u' n2 k2 T4 n" i
12.                                 y0,
    
13.                                 x1,
    
14.                                 y1);
    7 N/ a/ y4 t/ `! D1 B
15. 
    ( r( q& ^5 o- ^: R. v) t
16.     /* 返回窗口对应的canvas画布 */
    7 R6 S0 u9 L8 k/ ?
17.     gx_widget_canvas_get(widget, &mycanvas);
    & {6 I& S6 G8 g
18. 
    
19.     /* 在指定的画布上启动绘图。*/
    
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    
22.     此处添加代码，调用2D函数绘制
    ' Q; ~  e6 B8 y& ?. f
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    , z. ~5 {1 S  G
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
      U9 F4 [6 f4 B$ f; a- o- u$ A) X
26. }

复制代码

! M' c% z: ~" h% Y1 O这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。
" H* c# Q+ H. T
13.3.4        窗口里面2D绘制实例（重要）
' j! m- r, ?7 I% N$ L8 M% _0 o实例代码如下，本章教程配套例子也是用的这个代码：

$ Z; G: i, Z+ L

1. /*
   
2. *********************************************************************************************************
   
3. *    函 数 名: _cbWindow0
   
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   ; _' [% i4 N% e' ?" U. m  Z: @; Q0 Q
6. *    返 回 值: 无
   & R* S0 v: @5 E
7. *********************************************************************************************************
   
8. */
   * @1 w( W2 b$ Y+ {; f8 W# l$ f
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    ( s; E" ~$ a( S
11.     GX_RECTANGLE drawto;
    
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    : ?( i7 u2 {5 M- ^' s
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    ; S, {3 _0 m$ _- K7 [1 K; c* E
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    
19. 
    ( S. i6 Y9 n$ c; D5 k  ?- e$ J- [
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    # E& N  r8 a9 O' V5 y1 u4 A  R
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    5 ?( Z9 q. x9 O/ L: q& F$ n/ h$ {: e7 X
23.                                 100,
    5 \) q3 y$ K- o! }; S- ^
24.                                 400,
    / O2 @+ j" _8 r0 v
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
      N6 b& _6 n7 o/ w4 v+ d+ b
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    : Q8 |' `8 q& Q0 L1 b* @# K: \
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
32. 
    8 N0 w: C( S' r( i7 d7 J* `) d
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    6 X' s4 e+ E' c, r# j
36.     /* 设置笔刷填充的颜色值 */   
    
37.     gx_context_raw_fill_color_set(0xff00ff00);
    " E, o1 g9 h7 X
38. 
    / S) \! r' `9 ~% U
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    9 y3 G) t9 T; f5 j1 W! S
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    0 E2 t% @- ?, s: T
41. 
    
42.     /* 设置笔刷线宽 */
    ( C0 T3 l' b' O$ N6 }
43.     gx_context_brush_width_set(1);
    $ z$ x: z# y* Q) B' w  f  @+ L
44. 
    
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    
47. 
    
48.     /* 绘制圆圈 */
    ' `% e) w- n, {; @
49.     gx_canvas_circle_draw(120, 150, 50);
    # u& D( Z$ i. {- i! Z
50. 
    
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    9 a" I* \/ x4 `) K6 b
53. 
    
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    8 \$ C. M0 d% [0 \& l7 O# Y# W
57.     /* 绘制矩形 */
    # p8 w) ]% y! A6 W
58.     tempdraw.gx_rectangle_left = 30;
    1 P  \9 z5 ~. i0 e. y
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. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

. T9 B5 N8 P. o& z- Q  gx_window_draw
* L. r* {$ W& ?. K
$ Y3 c1 I0 M7 F: c9 g作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
5 b% e  C1 {  P2 J
7 H$ u+ a& w; O, t: M  gx_utility_rectangle_define
' f3 V. H6 N* U: R" }( z
定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

1 H, j, ^. r- x. @1 M  gx_widget_canvas_get
8 C" \2 ^4 }5 f- I' W4 a* l
) u) M) C& |( S; w& g6 B; b& ^返回窗口对应的canvas画布。
4 @! v* t" q' \) K3 p; o
  gx_canvas_drawing_initiate
/ n5 Q7 |, J7 W  }. Y! Q
在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。

0 f, Y0 O: E  x6 w  gx_context_raw_line_color_set

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

, M7 T/ _) c, ^6 A2 r

, Q2 N; I* v' Z5 |2 n5 j2 x
  gx_context_raw_fill_color_set

5 i; m8 t# Z+ e( _9 y; ]( v设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

  gx_context_brush_style_set
4 }2 d+ y' I; J9 x" x/ K
+ l  i, u& B  T$ n( r用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。

+ y7 k5 B1 F7 m, ^0 k  ^6 ~  gx_context_brush_width_set

用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
* G7 u2 R0 ^8 m6 x* h- Z, T
  gx_canvas_line_draw
" |) [& o. n+ e$ a0 K3 G. n
直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。
% v! S2 j) E3 d: H5 V4 i& f
. @: M* u- |9 P' x: O( @2 {  gx_canvas_circle_draw

圆圈绘制，坐标含义同上。
7 U$ V8 }/ {0 y+ E7 [6 P& V! K" B
% e7 r5 E- N( Q4 ^! ^  gx_canvas_ellipse_draw
2 H! C: M  y/ m) f, I( \/ s. k椭圆绘制，坐标含义同上。

  gx_canvas_polygon_draw
多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
3 I, p8 r. p; z2 @/ N# t# \
+ W4 A; ?! I& X6 H# Q' }  gx_canvas_rectangle_draw
+ z: @" k5 n) g7 ?* l. |0 a  b" W矩形框绘制，坐标点含义同上。
1 |0 H1 W0 z0 P- T7 P$ u. J* f
  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

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

' B$ W# k( ^( k13.4 实验例程设计框架
3 Z6 X1 K  n0 f本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
' `3 @; C% E- w  B2 Z
& X; A7 S8 l8 W" |0 F, c% e" K# q2 k  K

& q- T: Q6 A0 K2 S  G
! a5 ]: u3 z" ^/ V, D% T13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
0 D4 n6 R# d' U1 z8 c7 e
配套例子：
7 c1 p9 [# a( n3 X. U# O0 }+ f
8 C3 N# t" w) ^- L& x1 O' t* V本章节配套了如下两个例子供大家移植参考：

, ~3 e$ @! I! @8 R: O# k  V7-2011_GUIX 2D Draw
) Y1 [, @& X1 n% i3 j
+ v' Y- _% P2 E7 s, V0 ]' XGUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
( A; A8 [2 {& c3 L. @/ G
  V7-2012_GUIX Studio 2D Draw

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。
/ k% _; k, g8 }0 W
# t& g* E$ ~+ ?& A实验目的：

本章主要学习GUIX的2D函数绘制。
# S. O( I" F) h/ }1 Z! H" _- n
! l" Z/ Q! _8 m* W5 A: D3 }实验内容：
: P/ V/ R2 P1 [5 C8 R5 x
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
$ I* T6 `8 _2 {8 g/ K+ VApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。

% o3 u1 I6 S" n- v- OApp Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
6 V6 k4 d: _0 s% _+ P# t3 `
" ]4 o6 L- @- a7 n; NApp Task UserIF任务 ：按键消息处理。
0 F/ i8 r5 k! z% @
App Task GUI任务    ：GUI应用任务。
( }( d# M2 ]4 V2 R
# F: i5 x* d$ q% vApp Task STAT任务   ：统计任务。

5 \+ P0 H! n- R: z. iApp Task IDLE任务   ：空闲任务。
+ H/ G! {: X/ B2 w
GUIX System Thread  ：GUI系统任务。

5 p. W& k$ L" w: g: u) H! I! MSystem Timer Thread任务：系统定时器任务。

: {* j1 r! e: ~5 R1 |6 w实验效果：
: D; z* y# o. V! [

5 {# ?! y# _) |7 ?# _, V7 I
GUIX Studio的界面设计如下：
- x+ s  u: b' l' _4 c4 e; v2 w1 }
! L2 o+ U1 B- x5 D6 U9 G, m7 H

( \8 H1 D/ _. r" E6 Q" p3 A
5 [7 f: J% E- n4 M6 |3 C0 R0 x串口打印任务执行情况：

; M! [# @3 a1 ^; R; oIAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：

* p. ?1 ?" a) l. l: W
4 j' `, R. w' e( R1 |% d* T  IEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：

4 d) g3 d- e+ V+ J) ^

1 A: m) Q/ G7 X0 \7 |展示里面有乱码是因为Embedded Studio不支持中文。

13.6 总结
0 N! V- p7 X9 \本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
" l  E( m/ T& F% T2 }3 E

, \0 r/ h# v5 b5 P& n( H7 j- W; X2 \# b6 P
5 n& S3 m: Z, t$ p
5 O( r; c0 F, {+ K! b* t6 u
  ^( h& ^$ I  s; V