13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
GUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
8 M, o, i  W* w  j: h
$ C1 Z/ c$ P5 N; v8 N( Y+ i4 g5 F8 ^5 {' I新调整的界面效果如下：
  v/ z3 {7 F' Q/ I: d
$ O+ E6 N6 n. X

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

下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

5 ]3 ]% u+ s0 P1 Y6 G4 P/ B这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
$ z( ^+ Q' J4 F
13.3 GUIX的2D绘制实现
在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
5 T9 r: P2 f4 `0 `6 M* [+ T8 c7 Y
13.3.1        了解2D绘制函数
" }2 b! M1 w: L  R5 VGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
* \' Z6 i' U8 G$ p+ ~) }
# X. u/ A1 T% l+ k6 O) m/ `$ _

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

13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
0 f- f2 M9 c  I: p8 g/ l
8 ?$ d( B% i$ F! S7 ?

$ k1 W/ W; V( i; V: z1 N0 |
Brush画笔主要定义了如下参数：
: e8 n7 ]1 }# G! x9 i/ Z3 j- K

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   2 @- W2 t1 H: d/ ]$ b5 d
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   ' z) H! k4 L( [( t" I' e
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   3 [' l3 X" f  [) K( |8 Y; \& q
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   ; p8 P" P% ^& l2 w0 W: j# I8 I+ x
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    / t: G  o2 F8 K, [% z
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

: k9 w4 y6 }- w' k% i其中画笔样式成员gx_brush_style涉及到多个参数：
- H1 U9 y/ j. T
. A0 Y. _9 J4 b' n6 P8 s4 N4 {$ ^6 ~

1. GX_BRUSH_OUTLINE
   
2. GX_BRUSH_SOLID_FILL
   " r- ?- b# K4 _6 F. u% T
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   # C1 ^! L  W1 M# U7 m
5. GX_BRUSH_SOLID_FILL
   0 Q) s& j+ r2 V
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   
8. 
   
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
      @8 ~& ~3 m$ O
13. GX_CANVAS_COMPOSITE

复制代码

这里将当前用到的三个样式做个说明：

  GX_BRUSH_ALIAS
4 R6 k+ c+ m3 D3 v6 `: L; _用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

4 y! U2 v3 G3 f' }* A) X; z7 Q. H  GX_BRUSH_SOLID_FILL
用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。

  GX_BRUSH_ROUND
3 |9 |/ [4 `8 U( }
用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。

" g1 i- I1 l- Y13.3.3        窗口里面做2D绘制的基本框架
, b& W5 Q3 D' M& S# ^6 B2 O窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
% i; j5 e0 i  V! Z. m

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   
4.     GX_CANVAS *mycanvas;     
   - h1 m/ Q5 `  u5 P! f5 g- b# ]
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   , O7 _9 E$ p+ P: h* {+ l2 k
7.     gx_window_draw(widget);
   / p( U: o3 l  b
8. 
   , s. x9 y; s$ J; S- R
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    5 m- z/ x/ ^5 ?: r. G
11.                                 x0,
    
12.                                 y0,
    , r; f7 j' L1 U! U6 `
13.                                 x1,
    
14.                                 y1);
    
15. 
    
16.     /* 返回窗口对应的canvas画布 */
    % M. ~6 V  u6 ~" t) X9 @
17.     gx_widget_canvas_get(widget, &mycanvas);
    - |9 `( D, D; @; Y9 S+ z4 d
18. 
    ) C+ j) c7 ]! {) o) e
19.     /* 在指定的画布上启动绘图。*/
    9 k. @2 G4 g2 r; J! h9 x
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    1 z- Q/ G/ J2 L' }; S
22.     此处添加代码，调用2D函数绘制
    - l1 P% v9 \6 B& Z
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    $ V; }+ z# j* X) r7 B6 L
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

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

) a, |4 C1 b' u* v( q13.3.4        窗口里面2D绘制实例（重要）
实例代码如下，本章教程配套例子也是用的这个代码：
3 T- |2 }, X  Q: E% Y) F

1. /*
   8 p8 l  h+ X, ^7 h8 W5 B
2. *********************************************************************************************************
   
3. *    函 数 名: _cbWindow0
   
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   ! \" L% ?7 o1 j
7. *********************************************************************************************************
   % M- K3 _6 [- L1 N; E. z. I# \" ~- w
8. */
   4 C  x# X* H* Q5 f4 O) Z2 U* h( ]
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    
11.     GX_RECTANGLE drawto;
    . n6 q$ n  P  U
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    4 y1 P) {* y& c( h9 h
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    $ h' }, s4 H% ~0 J
15. 
    
16. 
    / M7 e/ z# e/ N  v, f4 x: E
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    ) [3 v2 P5 o' M, l1 {! L7 i/ @
18.     gx_window_draw(widget);
    # U$ f& _) L4 k0 F* S7 C
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    
21.     gx_utility_rectangle_define(&drawto,
    9 q' L2 I) `, ]' B
22.                                 10,
    
23.                                 100,
    
24.                                 400,
    
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    % c3 B6 c$ o- G6 x6 w# F
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    % N, i, K1 m7 X8 Y
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    " m* t6 V; _+ `* C! {) R
32. 
    4 r9 h7 P& f1 F# h5 E8 C
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    & g9 p) E6 ~/ I9 L, \/ P
35. 
    # z' r$ [8 D! `% z5 s1 Y
36.     /* 设置笔刷填充的颜色值 */   
    ) A) |% s! l- u! z5 Y7 y
37.     gx_context_raw_fill_color_set(0xff00ff00);
    . g+ c8 f4 Q& k* {+ `
38. 
    
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    $ K1 O9 {2 D) a. c: f1 |  r1 h
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    # y1 k: A) m1 f$ V! L; m2 X5 Y/ s
41. 
    7 J+ u- ^" |/ Y: i+ f
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    % x( s: b) K3 ]
44. 
    
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    4 z0 C4 w9 M$ f
47. 
    ' l0 C5 P5 w: |* s
48.     /* 绘制圆圈 */
    
49.     gx_canvas_circle_draw(120, 150, 50);
    3 x0 t' u; e4 h" F( J
50. 
    
51.     /* 绘制椭圆 */
    3 q0 e& X) r; B2 a4 ?! N
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    6 `8 E  f; `$ A3 r
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    ; q# H5 j. N6 {0 z1 o6 e0 k( I
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);
    1 O/ y% r  w6 ]: F0 @) z
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

  gx_window_draw

作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
6 ?) o; a2 B( X6 p
% X# F3 q+ c% F+ X  gx_utility_rectangle_define

定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

# r! I. Y$ u2 m2 {  gx_widget_canvas_get
5 X! |( |$ e1 F7 C$ }
1 w* [7 k" Q& T5 u3 f4 `) d+ L返回窗口对应的canvas画布。

* z5 h$ A3 U4 L& p) M  gx_canvas_drawing_initiate

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

$ e$ s8 {0 g0 S5 P  gx_context_raw_line_color_set

( F$ n" u' l& @# K5 w设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
8 S( m% W; o9 _" f2 J0 }

: ?# ]  G: Y6 s3 v6 _# X
  gx_context_raw_fill_color_set
1 T$ W2 a" g& `3 Y
设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

5 M1 Q( p4 y2 i: _; X2 D. j1 t  gx_context_brush_style_set
3 l* y8 O6 S$ H# U" [
用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
# F0 l% O/ h. O. z' T: p
  gx_context_brush_width_set

用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
1 M  Z$ a% ~+ H9 O
* d- ]9 x5 a1 }( F' I1 t  gx_canvas_line_draw
9 G4 @5 s4 J" l
直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。

+ k% y) J+ z9 B2 j* P3 X0 D, A  gx_canvas_circle_draw
1 j$ ^6 ]; C  F( q
圆圈绘制，坐标含义同上。

  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
1 `6 z0 j; b8 ?' {* |1 B
  gx_canvas_polygon_draw
, @0 ^/ u3 W. z# @8 g1 Y* B9 Z多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
! Y# j6 E1 e# e- }
" \) ?( n: b: J, m  gx_canvas_rectangle_draw
矩形框绘制，坐标点含义同上。
& `+ _9 [8 Z, _
  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。
) j- H. k& h- N8 E" [8 n. v  b8 t. T
" m% s( O" v% ]9 ?针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

13.4 实验例程设计框架
本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
  x: Z2 R4 S4 ]# ~4 b! M0 g
7 w. {1 ^% T- ?

+ _8 U( U2 B: [% I2 v1 H13.5 实验例程
7 X+ S' I: A. A/ G% {/ w4 g（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
- E/ F! J  _0 V# T0 z$ j
配套例子：

本章节配套了如下两个例子供大家移植参考：
# h8 G6 |* p0 v" A4 [: u# i
  D2 \, F1 f. J% s0 c8 H  m9 N0 k  V7-2011_GUIX 2D Draw
) o" R+ B. d* Z& D* S' p" }2 n9 U3 A
GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
8 {, ]0 C# `: Y% x2 h
  V7-2012_GUIX Studio 2D Draw
% s+ m3 @& {: M9 }+ e- ~
3 n2 K  A5 Y8 HGUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。
3 a7 D% s; _: F! }
6 b( \3 P% X& ?实验目的：
( N* J! @$ ~. e% q+ E0 A
本章主要学习GUIX的2D函数绘制。
8 Z1 z. Q7 {* ~
实验内容：
2 \6 n* p3 l' j8 `0 w. \
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。
8 p" ^: U- S% |( O8 p1 `% }
App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
  R" P! S( _$ b" c& A1 |) Y, @
App Task UserIF任务 ：按键消息处理。
2 u. n4 Z8 W5 c3 O1 e: L
. S2 D/ }% ?, q. h8 ^8 }App Task GUI任务    ：GUI应用任务。

App Task STAT任务   ：统计任务。

App Task IDLE任务   ：空闲任务。

6 V3 U2 [" I/ t$ r' \GUIX System Thread  ：GUI系统任务。

5 G( I+ `7 X2 p& K# ASystem Timer Thread任务：系统定时器任务。

2 E! p6 g2 x* G. d  u( Y2 H' Q实验效果：

1 g3 d. u# q2 M3 }) T) Y# U* n

. E: W. k$ o# Y, S$ g3 }GUIX Studio的界面设计如下：

$ U3 T; y% ~/ S% [, D

: ^8 y$ V' i2 ~6 ?3 E
% R# b5 l) B- T$ ^# I% E1 ^1 o1 b( Z, \/ {串口打印任务执行情况：

IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
) e7 \" w* g4 d0 n8 U5 a
: U: `7 c& O# _7 S0 A7 `5 l0 b

: A0 y. k$ s% m/ J& ^; f$ v0 h* _
- B+ o2 f5 h1 oEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
$ |+ _  M7 F* P1 K) p: g
- D. w- m, w5 |5 M& I

8 L! r: R% r* ?3 h: |& d
展示里面有乱码是因为Embedded Studio不支持中文。
% B- m- k& w+ c3 |& S# M8 {" e
2 p1 b5 H) ^; Q. J7 P13.6 总结
4 L5 {( E5 q" i: c; c8 y本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。


; H& \1 P8 [6 _) s


( j1 r0 q8 j2 y' z+ x