13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
. {6 E4 O) }  @3 q- F% e9 mGUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
5 _  h8 z3 h# ?
新调整的界面效果如下：

4 F+ u; P3 o" {( j

5 k# b* v0 Z1 j1 a2 l  Q4 Z6 \
文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。

下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。
+ U/ n6 u) {. o3 k. e& t

这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。
2 N) S( H& ^. X8 N- b, F( @
13.3 GUIX的2D绘制实现
, Z6 {9 K) R" J4 I' ]% {) v在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
0 d; f/ g2 c! y" G- d( s
& H  O  U5 ?# |/ w( ]

这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
6 n2 k2 N+ N: n, c# x/ {6 A. ?" S4 ^
# Z+ J2 q7 b8 u/ y# z0 _$ k13.3.2        了解画笔brush函数
& C; E* J0 h6 b7 C) J) _( d画笔函数在context相关的几个API里面：
( J* y( C: t% k" n
3 ^& F; ^+ X8 I6 `: T2 _, ^( f

$ s1 l$ z; o; x0 A% d0 h  K
: U9 D6 [9 E/ U- p% l' D- ~Brush画笔主要定义了如下参数：

- u' \; Y' U5 @0 J

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   - }9 \) }* Q/ I& P3 i6 C5 e
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   0 \- J2 U; N; ?* c9 L5 T
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   ' Z9 R) s) Y2 S: x! u
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   9 g: L, S( ~& r0 W% f5 m
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   / `6 b$ E: n2 I2 e6 L( `4 V# a& p
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    2 p: l3 v8 Z4 g9 [5 _' _
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

其中画笔样式成员gx_brush_style涉及到多个参数：
& V& n& T4 r" ~7 T6 d

1. GX_BRUSH_OUTLINE
   9 i2 ]# T. f6 C$ f/ a$ k% B8 D
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   : I% W; x  B' j9 a# z7 a
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   2 d4 d& S  j" Q6 {5 z0 P& u2 {; y, y2 ]
7. GX_BRUSH_ROUND
   : s, Y8 _- g& j6 o
8. 
   " Z, Q7 k: @5 v8 {6 R1 ]
9. GX_CANVAS_SIMPLE
     W2 ?+ k( a9 ^6 [" U2 @" k
10. GX_CANVAS_MANAGED
    
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
    6 u8 T% V. Q* @% _; z, P- G
13. GX_CANVAS_COMPOSITE

复制代码

1 O/ L: X3 |8 Q1 s这里将当前用到的三个样式做个说明：

  GX_BRUSH_ALIAS
& `, m: V% D+ r7 N2 F用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。
, U( l5 L, D0 }6 t
) p/ y2 \0 v/ v  GX_BRUSH_SOLID_FILL
+ ~$ \5 N2 e& V7 J4 ~* ~用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。

  GX_BRUSH_ROUND
+ ^" _8 a; Q! U  _- K/ l! x; O" I
用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
% T" C. u% Y$ W3 z* A& x
- \% C3 ~; L. Z9 D- Z9 _13.3.3        窗口里面做2D绘制的基本框架
+ n" J( J& V3 z7 U) I窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
- |2 x) b9 u- Z  P2 H$ h5 s. J
% `* J4 f; l- S" n" I9 W

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   4 x1 \+ r+ r$ A: c* {' c+ \3 U( |
3.     GX_RECTANGLE drawto;
   : n" J+ i: \% K
4.     GX_CANVAS *mycanvas;     
   " w' `: I% Y& S1 R5 K" J1 i" ?
5. 
   - e0 d7 \! a1 O4 _6 i6 c  m
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   ( S, l  R1 _" ^5 d8 Q4 L
7.     gx_window_draw(widget);
   & Z; L: v, s0 F+ ~2 e# g8 Y! \# O  |
8. 
   " t0 ^% {9 Z9 _. U( g4 T
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   ) C! f8 n* X$ z' A7 w# X
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    4 j3 |( ^" o: b! a6 C+ F# d; S
12.                                 y0,
    : T" w8 \, T. U0 a( B" B
13.                                 x1,
    
14.                                 y1);
    ! W1 L/ W1 _6 q3 G1 R
15. 
    
16.     /* 返回窗口对应的canvas画布 */
    2 @3 k0 Y! Y3 G- I# L
17.     gx_widget_canvas_get(widget, &mycanvas);
    1 g4 H# _( N+ |- y8 Y; n6 A, A5 e7 \
18. 
    
19.     /* 在指定的画布上启动绘图。*/
    * X. W0 e- p1 t0 m2 X* J7 z. i
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    + I  V0 W2 U% O4 H- D9 ?6 f- y
21. 
    
22.     此处添加代码，调用2D函数绘制
    ) ?$ t) m6 j& d4 |$ }$ z6 ~# m
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    8 H$ q2 X4 \! k6 l# j% J  V( q
26. }

复制代码

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

( H! B7 `2 T( C! ~9 i3 t13.3.4        窗口里面2D绘制实例（重要）
  P, e& \9 ^) v3 M1 u实例代码如下，本章教程配套例子也是用的这个代码：

* n+ s  E/ R! n- y

1. /*
   
2. *********************************************************************************************************
     m4 B2 o) L* n2 S
3. *    函 数 名: _cbWindow0
   . I9 R4 h8 E; P1 H$ H8 F9 M( G0 z. p
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   # ~1 j* I- O8 ]6 r( j$ F
6. *    返 回 值: 无
   1 C6 x+ C; f6 h# u. r/ T: v
7. *********************************************************************************************************
   
8. */
   $ ]7 ~7 Y- u% B9 B' C$ B
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    
11.     GX_RECTANGLE drawto;
    * T7 W; n7 K/ C' {  F0 r
12.     GX_RECTANGLE tempdraw;     
    9 g% w+ i0 j  g3 w& W
13.     GX_CANVAS *mycanvas;
    
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    2 c4 b2 X  \! k
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    - _1 H( y2 Q+ p, ]
21.     gx_utility_rectangle_define(&drawto,
    ' m4 f# |4 M  p' S
22.                                 10,
    + j7 ]2 w; R" e; [
23.                                 100,
    * d- C7 v. Q: z- C& Z, s3 {
24.                                 400,
    
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    7 F! p  Y1 U) \7 Z7 ]4 C9 d3 s
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
32. 
    & U; ~, r$ q& {) x
33.     /* 设置笔刷画线的颜色值 */
    - t( \2 G( A) A. d
34.     gx_context_raw_line_color_set(0xffff0000);
    : {4 v" V1 e. p0 U) X0 X' h( Z
35. 
    * \4 T! h# r4 B7 K' e8 u" B
36.     /* 设置笔刷填充的颜色值 */   
    
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    8 d# V+ O; X3 I) A: I; R2 t
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    2 Z% d4 _" O$ y& h, S* o$ m
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    
41. 
    
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    ! `/ D  x; j) o" G
44. 
    4 D6 U* S/ e* V3 C
45.     /* 绘制直线 */
    ' z' R, ?' _2 L6 ^0 W: _
46.     gx_canvas_line_draw(10, 100, 50, 150);
    
47. 
    % q& [6 d' l8 g7 w' e0 e! q; w
48.     /* 绘制圆圈 */
    
49.     gx_canvas_circle_draw(120, 150, 50);
    / t! |) E9 P4 ^& b1 u9 ^
50. 
    9 |: ^0 d* |& k  v5 Q1 {/ J
51.     /* 绘制椭圆 */
    + H3 t2 p- P% e% U6 u! t
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    6 D. c/ u0 v# {& Q6 A, g
53. 
    , d' j; s$ M9 S5 q( M# e9 f" {# z
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    
57.     /* 绘制矩形 */
    
58.     tempdraw.gx_rectangle_left = 30;
    ( F2 {, R$ h/ e0 J( z$ P
59.     tempdraw.gx_rectangle_top = 210;
    - `; h, ~5 f4 C/ ~/ B1 i
60.     tempdraw.gx_rectangle_right = 100;
    
61.     tempdraw.gx_rectangle_bottom = 260;
    " b% u5 v' B; ~2 K7 z
62.     gx_canvas_rectangle_draw(&tempdraw);
    6 I3 D5 P2 W! n; K- J! p/ }: l/ u
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    , @3 x, [2 A. X, o4 o  b
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

  gx_window_draw

作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

  gx_utility_rectangle_define
+ C8 o! C  ^& X" M+ s: B
. C" x% j0 L& K- U* s定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

  gx_widget_canvas_get

返回窗口对应的canvas画布。
& @0 p$ h2 F) G% t& \2 ^% p
  gx_canvas_drawing_initiate
4 h% t9 |: H: Y+ O- b* j
在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。
0 Z2 a% X) ]- }1 i: n
  gx_context_raw_line_color_set
- U* o- ?) m7 n/ }
% j5 A; Z  N* V设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
9 s2 Q8 ^* o+ ~4 s( I

9 g+ A# A5 r7 o8 B  gx_context_raw_fill_color_set

* x3 J0 ~  _; a9 N0 f9 P& r设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

  gx_context_brush_style_set

' [- f9 ]! z( U$ Y4 c" |用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
1 g- P$ @! v, N; s4 e8 S% f
  gx_context_brush_width_set
1 R1 T* f  G, P
7 F1 c* {5 X; T6 i( C/ z用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。

  gx_canvas_line_draw

直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。

" g3 h: d8 [) E. M* N  gx_canvas_circle_draw

0 G# l3 t  r$ A圆圈绘制，坐标含义同上。
/ {0 H- Q. l3 y( X) H$ m7 p& @" B' U
; h& l, {: k, }+ N- t  h( f8 X  gx_canvas_ellipse_draw
5 o" G. U  @$ }3 ~  H0 S4 E6 J椭圆绘制，坐标含义同上。

: K( I+ [5 a6 Z% ^  gx_canvas_polygon_draw
# d! {; s- @6 m7 V6 [多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
8 `/ J0 h+ M' a8 D0 M
  gx_canvas_rectangle_draw
0 X4 D0 [& s/ p$ N2 T" \# e矩形框绘制，坐标点含义同上。
" M0 P; J0 s- }) q
  gx_canvas_drawing_complete
) Q/ W1 X% ?' J5 a, s8 v用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
' o% Q7 e; `" e& `: y/ X2 H' _
' L( R6 q6 m  N! `13.4 实验例程设计框架
. X* s# j8 i( X$ Z) E/ @/ k, ]* V本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
1 }1 C2 n% a+ t

5 c# K1 c+ g; V6 g4 U4 U
5 m9 Q  c" W+ b+ l( k13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
- ?+ a8 @) [3 M! G* y4 v7 S; F
配套例子：

本章节配套了如下两个例子供大家移植参考：

9 n, Z! \' p. }8 E3 P) S2 b& Q/ i9 X" K  V7-2011_GUIX 2D Draw
7 V/ ^1 X* L6 I- a  ?' ~* R2 Q, W- N* b( w
GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。

; k2 R! a' `: q4 t# z  V7-2012_GUIX Studio 2D Draw
! ^/ n% o& G4 P& q4 e. p
* X6 `& j$ K* W* m4 r0 t$ kGUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

# R9 p. m1 S6 o0 Z7 l! c/ E实验目的：
5 ~5 ?2 v/ r1 `
* j1 h* N/ d, t( o" e本章主要学习GUIX的2D函数绘制。

实验内容：
0 N8 }/ S$ V% i- z
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
  n% p1 ]: g, JApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。

+ R9 p, z+ N8 @( J/ y5 xApp Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
0 T  n- O7 h  I
App Task UserIF任务 ：按键消息处理。

App Task GUI任务    ：GUI应用任务。
2 W: @; t' s8 p  ]5 B" d
App Task STAT任务   ：统计任务。

App Task IDLE任务   ：空闲任务。

GUIX System Thread  ：GUI系统任务。
, n% S. ]- p- U7 T) _) {
System Timer Thread任务：系统定时器任务。
) Y% j4 A- Y# {1 A9 H" l; t; W
. X  G5 h# W" `3 e0 }/ r实验效果：
8 Q/ H* q# |; d) R3 U5 F; k. s( f
" {+ m& X) P, s. {- ?! v4 b

4 d) _. A% M0 I) c$ f2 l  Y9 ?2 Y
. K4 @+ [& {" T' N* `GUIX Studio的界面设计如下：
5 K. \  Y& [3 W+ k- z. X

串口打印任务执行情况：
7 w8 `4 i% a# g+ }# G( Z
IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
# _; R- o5 K" W' Z: }; l

2 V2 W/ k) H4 f3 e0 l  c) h4 zEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
# i$ w) c6 E& h4 _* Z# o7 X2 k
2 S3 U; H# I3 w

- Z# m+ p1 h3 _4 A" W7 A& D展示里面有乱码是因为Embedded Studio不支持中文。
+ p. F- W9 v# |, V0 a# X
13.6 总结
本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。



4 z9 j0 s; ~! m8 ]6 L; C

1 R# J; P2 X3 D- H8 Y/ E