13.1 初学者重要提示
$ c" k. a* Y3 B0 H3 Z7 |  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
* s& k9 d! i5 i% ^# [13.2 GUIX Studio设置窗口回调
- k2 Z  N5 s6 B" ]GUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
0 Q: L; j7 q7 s# o7 s
新调整的界面效果如下：
" v( A% j5 M& u4 B* q
' {4 }; R" m& k3 |( P4 W

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

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

5 u1 l  m/ l+ K2 w

9 T, Q5 M* @) R' @这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
# Y% j# `0 o+ k1 W, h
13.3 GUIX的2D绘制实现
6 Z$ Q; \& N' T: T在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
5 @( B' L0 q* V
/ n- V4 u0 Q* p13.3.1        了解2D绘制函数
" S/ T: Q5 h1 t+ q3 j: W( O% OGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：

4 T. G. z3 u/ q. z. ~; d- x' H5 I$ m

6 I" U# m  i  X) A8 K5 q这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
- b( C3 k+ G/ \; x
4 X7 b% E) w, o6 O- }* q13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
! w# d  B' U3 }  Y$ ~' P
7 B5 v  l) X8 `

" m, M# t4 L: b
. P; u7 A7 S% `) K( R0 SBrush画笔主要定义了如下参数：
0 J4 e. \3 b! n* \9 s8 h  \
% |( ]3 R2 |9 q( `

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   * ?7 N, l  c& {  t; l3 t
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   / t. @; J* f  w$ V6 A
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   2 X# p/ F8 x7 J) _( {  o
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   - g% [' ]- _; Y: k% P
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   6 j' _# f' n" a1 ]- `7 p3 p  c
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

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

# `- `5 w! f7 X: f3 N! P

1. GX_BRUSH_OUTLINE
   ) ]! R: E6 S: o
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   9 J9 a7 M" k! V4 F  }# R( I& y
4. GX_BRUSH_ALIAS
   
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   : b# P/ w4 x$ W5 ?! M* g& `
7. GX_BRUSH_ROUND
   . B. N7 _5 J$ o* V: t! N' q
8. 
   
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
    
13. GX_CANVAS_COMPOSITE

复制代码

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

) J' T- S) k; V% r( H* o5 J1 ]+ {  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

  GX_BRUSH_SOLID_FILL
用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
% b9 {+ x% T! C9 T
- l+ c0 `4 F4 r; h, z  GX_BRUSH_ROUND

+ \; r2 [+ D; s$ z9 U用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
  w) E/ H2 A; E. ^5 h0 r, {6 o' p; h
" L# [5 [- `4 W2 l: L- o13.3.3        窗口里面做2D绘制的基本框架
+ }' n1 F4 j4 {& ~窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
  _( n# ~# q$ F7 X
3 j9 ?9 c9 @  M6 T0 @

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   
3.     GX_RECTANGLE drawto;
   
4.     GX_CANVAS *mycanvas;     
   8 ?& K; r8 |5 {: i. y; f
5. 
   ; B( O( }1 n8 l- k% D( v( m. r# f5 ~2 {( \
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   * T" O( _4 h3 Z- l
7.     gx_window_draw(widget);
   
8. 
   
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   # V9 F& O2 V' ~% F
10.     gx_utility_rectangle_define(&drawto,
    + H0 J. B: W7 e& ^4 B8 _
11.                                 x0,
    
12.                                 y0,
    4 A. C6 A) Z+ G# b9 C7 w
13.                                 x1,
    
14.                                 y1);
    
15. 
    ) h4 R, e. ]1 \- F& y+ D) J
16.     /* 返回窗口对应的canvas画布 */
    
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    & \  Q" W9 [; B& D
19.     /* 在指定的画布上启动绘图。*/
    
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    ; H; Z: ?% i; ]  v3 C
21. 
    5 u9 b; f+ p) w  W. {
22.     此处添加代码，调用2D函数绘制
    8 z2 {& {; m+ ~  ^5 N
23. 
    : s7 x/ S3 o7 R3 P
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

* Z' {! s( ]% @5 Q" ~这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。

13.3.4        窗口里面2D绘制实例（重要）
$ \6 K5 ^4 \1 F3 T4 e) w  [8 d1 a实例代码如下，本章教程配套例子也是用的这个代码：
& j4 v4 a* ^% s. z
1 R. X3 B4 E# F# c3 E6 J

1. /*
   % v/ R# e; Q; S* H, O5 ]* n2 A  z
2. *********************************************************************************************************
   ' j  ]" c* Y- T8 w$ _
3. *    函 数 名: _cbWindow0
   2 y% [4 h: x( _  _
4. *    功能说明: 窗口回调函数
   2 `" ~) ]/ V' i& ?& O! u( @* n
5. *    形    参: widget 窗口句柄
   2 m- g; o/ Y0 P. @2 C! V4 D- |
6. *    返 回 值: 无
   + t, ]$ B- |8 t" i5 h
7. *********************************************************************************************************
   2 p. r- z# V5 B, \
8. */
   
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    8 w0 t* P+ y- F9 z% c4 Z' E
11.     GX_RECTANGLE drawto;
    
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    ! ?: `" [/ \# R$ j
18.     gx_window_draw(widget);
    . L# e5 ?; A4 h# w7 u
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    
21.     gx_utility_rectangle_define(&drawto,
    & ?0 L: o0 W$ O6 J" W
22.                                 10,
    
23.                                 100,
    ; Z( w; R% |4 e( j" s( v
24.                                 400,
    
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    : L. {0 @2 ~- s
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    . s" p! Q( t! y
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    $ ?8 k+ [* j: h0 ]
32. 
    0 K0 Q( Q+ q1 g$ T
33.     /* 设置笔刷画线的颜色值 */
    # D, R7 t- w# k/ Z
34.     gx_context_raw_line_color_set(0xffff0000);
    + F- R% @2 [5 v3 V! @( \# K
35. 
    
36.     /* 设置笔刷填充的颜色值 */   
    . G/ ~7 F# {# c! R0 h
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    2 q- v! c5 \3 i! r2 S' t/ ^; j( J$ m- z; N
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    1 i6 O) L7 Q6 E- D9 m$ x* ?
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    # G6 z) z& y! ~8 s5 C/ n' {9 R% c# B
41. 
    ! @* k1 Y% \) ~# e, V
42.     /* 设置笔刷线宽 */
    7 f" z6 \, ?( L' I; u
43.     gx_context_brush_width_set(1);
    
44. 
    ! t8 S8 K  c# _4 R- u
45.     /* 绘制直线 */
    9 V! h. q  c; c9 n" s& u3 }! y
46.     gx_canvas_line_draw(10, 100, 50, 150);
    + G! U6 Y6 U7 p: J; i
47. 
    
48.     /* 绘制圆圈 */
    ! R: F; O3 Y) s- [
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    # c( B$ y  p. f) F7 T8 J/ Z
51.     /* 绘制椭圆 */
    
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    ' V5 |* |1 W7 x; K
53. 
    
54.     /* 绘制多边形 */
    * G3 @1 b/ U6 {
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
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);
    : Y) U9 \. J) H. Y
63. 
    6 k( Z0 j! G) d& v6 }
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    ! A$ B) p  ^8 M) C  F$ u
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    * Z0 I5 {5 W) p! Q$ O
66. }

复制代码

; o. q; T0 I, p( K0 m; M; m" @3 a  gx_window_draw

4 T$ g+ {4 A! M( y) A作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
0 ]' v# H5 ?, q) N5 r
  gx_utility_rectangle_define

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

. R$ l6 b# ]5 p# p) |  gx_widget_canvas_get
4 A0 R5 _% h8 U  z
返回窗口对应的canvas画布。
" o7 z3 M& x5 q
9 L0 {' J4 H7 U9 g* L8 @! h0 N- g  gx_canvas_drawing_initiate

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

设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
; E8 d$ j# a5 \" u
; b% e# E* O4 Y$ P& K2 F, [

2 d" w+ g, Y! N
  gx_context_raw_fill_color_set
5 D. O8 m+ c0 i* E
0 D8 |6 E( r' z4 t设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

8 s& e/ M- m& [* Z# R  gx_context_brush_style_set

用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。

  gx_context_brush_width_set

; o( q: f% b2 o& S& _; M7 r$ R9 F) f用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
$ q1 S* A; y% U% m* \: o
" C, Q) w" `/ x  G/ K4 y5 ^2 s  gx_canvas_line_draw

" x% ~' N4 M) A6 c# Z4 u+ O直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。

- \7 C: z6 d# _9 c9 y7 ~  gx_canvas_circle_draw
  F% {' v5 P( c$ @$ u) S  B
圆圈绘制，坐标含义同上。

2 @3 u! o9 c. R+ @  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
% I9 w3 [9 X( L5 a3 p
  gx_canvas_polygon_draw
! q4 i" m" C4 ?多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
, ~( [2 V& F) ~" t& j) }4 ~( B" u
  gx_canvas_rectangle_draw
1 @) `1 t4 e- A+ G1 a  T) f: Q矩形框绘制，坐标点含义同上。

  gx_canvas_drawing_complete
1 ]  u$ P& ^+ Q- B用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

2 @7 ?; L! T& @4 h9 [' O' \针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

13.4 实验例程设计框架
本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。

3 V% P/ Y1 q, w8 X5 _

2 Q) j4 ~# a5 _, V! w5 Y6 F13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
- x- ]9 G+ j8 @3 Z7 z* z, i8 \
配套例子：
- }% C5 W2 }; O' C& \) A& @: e
" e) T8 _3 ?- H9 H. h本章节配套了如下两个例子供大家移植参考：
9 l. q3 O& @+ C8 ]
  V7-2011_GUIX 2D Draw

- J6 Y  B6 {6 u* r% pGUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。

  V7-2012_GUIX Studio 2D Draw
8 y' s+ K6 V7 H- J: x+ x
GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

实验目的：
6 T( e. A. z4 m" I
3 D0 V1 M) ^7 t( s4 k( l本章主要学习GUIX的2D函数绘制。
2 F% r8 n, c' F, b) \  \
实验内容：
7 ^/ y9 l$ V% B. p
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。

, q/ y: x: ]! P" Z4 [, `4 a& kApp Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

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

App Task GUI任务    ：GUI应用任务。

App Task STAT任务   ：统计任务。

) T) K$ ^: K8 FApp Task IDLE任务   ：空闲任务。

3 Y6 t  x" @7 D( |( l% l! qGUIX System Thread  ：GUI系统任务。
* [4 r5 B* z. f# f5 ^
! ~% E- W  f4 Y  eSystem Timer Thread任务：系统定时器任务。

, t$ ^# I' S( d实验效果：

+ T6 b+ J6 I1 O& N- A9 x  C& R

5 Z/ R# q. q/ q$ D8 T
/ L  {3 i4 D5 u0 AGUIX Studio的界面设计如下：

! g" D" V% m3 \5 z, K5 M# q
串口打印任务执行情况：

IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
* T7 K' ~' K& B0 P

Embedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
# T& l2 H6 \" H3 {0 H

" T. H) K9 H5 [" u3 s5 H  V
展示里面有乱码是因为Embedded Studio不支持中文。
0 k  J0 m3 g8 _
13.6 总结
% _9 i$ x5 l; \( ^( c6 m7 f1 ?本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
& G6 t8 A5 h7 Z1 u

5 S" `$ }8 l0 t1 z7 H7 X  D, ]



# X5 f: Y+ h( L2 [