13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
3 p$ p, o2 A/ K9 h) S13.2 GUIX Studio设置窗口回调
5 J- o8 {8 c8 ~1 [1 w1 q; M% GGUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
0 F* _7 a' O0 n9 l. ?( o; N
8 |' p) j+ k; ~% W) ^/ f9 b6 N新调整的界面效果如下：

文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。
$ w3 ]1 Y  G% v
# f" D0 F& W% {8 @( r) o( Z2 r下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

5 a2 C  P& J1 N$ C

" s; n) Q& r, T% h' \这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。

4 @. J3 ]: \. x: R13.3 GUIX的2D绘制实现
在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。

13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：

. J' E( d3 J3 v* I9 H+ d' m这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。

+ ?# `8 J& r" u' X% j. U13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
# b6 {/ `  B5 a' p- U  p
1 Q9 V3 B! U6 Y9 ~

& ]0 P+ `' s. T8 y' a( w" E# MBrush画笔主要定义了如下参数：

" w" @( }; O0 p. L+ Y3 i/ T  K

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   ' z( V8 T4 N4 q9 k
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   
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;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    ! D+ y. U7 I  n* b
12. } GX_BRUSH;

复制代码

其中画笔样式成员gx_brush_style涉及到多个参数：
+ y7 B0 c" Y6 m$ K- }

1. GX_BRUSH_OUTLINE
   * L( R, j4 b! M# m: Z
2. GX_BRUSH_SOLID_FILL
     x) B3 B8 n$ b( ?2 y! W1 i/ H; S+ K
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   3 x( Y# B3 W& G7 A' [
8. 
   # t( c0 N4 _( C6 c" R* s, b
9. GX_CANVAS_SIMPLE
   
10. GX_CANVAS_MANAGED
    3 G) L( a* p! r7 Z# r! u
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
    
13. GX_CANVAS_COMPOSITE

复制代码

" [# Q: F( R; y3 N这里将当前用到的三个样式做个说明：
  A: ^) i9 s6 n% m) y
$ W; y. ~/ {" j+ w4 r& X  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。
) }% C# p+ M3 r+ Y. C) _% }: f  e
  GX_BRUSH_SOLID_FILL
8 o, l9 g) i! n用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
9 j) {9 m* A* i( h0 @$ k; B
. W; W8 t% ?9 i& _  GX_BRUSH_ROUND

用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
+ O( z% K1 ~+ k! {; ]
' }! ], M( U6 O% S, J! F13.3.3        窗口里面做2D绘制的基本框架
# Y+ N2 X  @' B, o: `窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
+ X9 {$ x3 c7 J& {/ x/ X  R

1. VOID _cbWindow0(GX_WINDOW *widget)
   3 v( ~: h' v5 b6 P/ J
2. {
   
3.     GX_RECTANGLE drawto;
   
4.     GX_CANVAS *mycanvas;     
   
5. 
   9 ^  g1 D* I; ^! i
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
   
8. 
   
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   1 j% L' i7 e6 e
10.     gx_utility_rectangle_define(&drawto,
    $ q4 r1 t- S1 C, x5 v+ \& l$ c, f$ S
11.                                 x0,
      C/ ]% p) c3 F) d1 X1 }6 n
12.                                 y0,
    
13.                                 x1,
    
14.                                 y1);
    ) \- r$ R3 g  H) q" ?
15. 
    7 C; V. U+ w+ R6 c; e8 U2 ]
16.     /* 返回窗口对应的canvas画布 */
    9 x* U, S/ ]' Z4 {2 k: K' o
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    1 X  V' K3 ~7 P7 K& `! m! x9 E- ~
19.     /* 在指定的画布上启动绘图。*/
    5 r6 l& d1 H$ l2 R9 q
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    , c2 h, {$ @% c
21. 
    . C  Y- X5 [+ z- x
22.     此处添加代码，调用2D函数绘制
    $ k2 N$ @% v; z9 l8 _" z7 R
23. 
    - x: G! E$ v" t) M6 d
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    4 ^* h' ?1 M  E% P; T$ o' g
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

1 J- k: ^( |5 I$ H这个框架基本是固定的，大家直接调用即可，下面举一个实例来详细说明每个函数的作用。
6 |, B& R2 J1 W+ E4 a* m+ x/ q
/ g7 E4 U3 `; v) B& p9 a+ M13.3.4        窗口里面2D绘制实例（重要）
  d5 g" l+ h, V/ P4 S实例代码如下，本章教程配套例子也是用的这个代码：

' R  V6 U; `$ h5 b) N

1. /*
   - H& `- d2 D/ z
2. *********************************************************************************************************
   ; e" ^( Q# ~1 q% u, H" d
3. *    函 数 名: _cbWindow0
   
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   7 W( R' N4 y# G9 k! G' z
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   
8. */
   / N0 A. h, L5 V& }
9. VOID _cbWindow0(GX_WINDOW *widget)
   
10. {
    # R- B8 o& J( K+ B
11.     GX_RECTANGLE drawto;
    8 r. \% P2 R( o% f) @+ b$ n, F
12.     GX_RECTANGLE tempdraw;     
    5 t& j2 Y' q/ d# S+ o
13.     GX_CANVAS *mycanvas;
    " N, R. P7 l" t! r
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    & S) l- u9 U- [) p8 v
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    & ~" q: x& @. X6 Q) t- P9 M
19. 
    3 x+ F9 ~' G8 }" w4 m8 G
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    * N' N& G# X% |9 s' a
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    
23.                                 100,
    
24.                                 400,
    
25.                                 265);
    
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    0 L7 d- c. t8 x, H1 Y+ h" I
28.     gx_widget_canvas_get(widget, &mycanvas);
    5 F7 E+ k$ R7 m; p1 M
29. 
    
30.     /* 在指定的画布上启动绘图 */
    4 F$ r6 m6 P8 V
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    ; P; c/ ~; ?8 q1 N
32. 
    5 @; P' ?7 {# C, o
33.     /* 设置笔刷画线的颜色值 */
    " m% i( K5 U2 I. j, o2 t
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    4 M& N& p% c. n6 X$ k
36.     /* 设置笔刷填充的颜色值 */   
    
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    
41. 
    
42.     /* 设置笔刷线宽 */
    / M% E/ F' t+ ]
43.     gx_context_brush_width_set(1);
    
44. 
    
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    : {; Z1 N3 q* h
47. 
    
48.     /* 绘制圆圈 */
    
49.     gx_canvas_circle_draw(120, 150, 50);
    . C6 J, w3 Z' I/ X0 P
50. 
    9 Q0 ^+ _+ V+ n& W5 u) f. b' {
51.     /* 绘制椭圆 */
    5 p) G' N4 ~4 Q* O! V
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    ( Z! f- I2 A3 U3 e7 ^
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
      o$ w: g5 m& D8 \: a7 ~
56. 
    % }/ l+ _3 d: @8 d
57.     /* 绘制矩形 */
    
58.     tempdraw.gx_rectangle_left = 30;
    9 }5 J% a9 g. k3 ]3 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);
    " Z; b8 R( [" N, w0 [9 [/ C0 L
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    / [6 Z+ H& x) A# W8 c  |) H0 Y
66. }

复制代码

& i( s  e* v* {5 a' r5 M  gx_window_draw

. K! @9 Q* o" e: F7 T) m' r作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
; H. W  C7 o6 z6 s6 [) A+ X  J
  gx_utility_rectangle_define

0 v; Q. V, m5 }+ O! X0 H4 r定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

, N+ D2 S8 ^& O1 A  gx_widget_canvas_get

返回窗口对应的canvas画布。
6 [7 ]# @7 M- m+ `& B6 ?3 f
& _9 e: G5 S* P" F# s& U  gx_canvas_drawing_initiate

在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。
- ~# `- G2 C+ a# f
  gx_context_raw_line_color_set
" e: c$ n. p% j
设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
( W1 g) `+ O/ g7 M

+ T6 I, s* X5 E
& J( q; A/ d# k/ A0 ]+ @  gx_context_raw_fill_color_set
' W! D$ h0 o3 v  k& C9 _& C  B
6 ~/ ^# h5 n' P: }设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。
# Q3 }/ m; Q- ?1 d/ D
6 Q6 }& T- t3 ~. f' Z  gx_context_brush_style_set
8 V& E8 w- |8 w2 V( n4 t7 C
用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。

. q2 ~! m! t: i; V, S" _& G  gx_context_brush_width_set

用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。

  gx_canvas_line_draw
+ u) ~) I6 `) k$ G/ m
直线绘制，注意坐标位置是相对于代码中的窗口，而不是相对于gx_utility_rectangle_define定义的矩形区域。
" B, {+ l' @' ^! g7 o' |% `
  gx_canvas_circle_draw

圆圈绘制，坐标含义同上。
- T, E  h: D( S% V( n4 E+ @+ K
  gx_canvas_ellipse_draw
6 l) `1 a5 w3 ]椭圆绘制，坐标含义同上。
5 w; m, s0 ?( i7 i4 u
  gx_canvas_polygon_draw
& u7 J8 F" K9 X- N1 n; [$ K& w' e9 O多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

  gx_canvas_rectangle_draw
矩形框绘制，坐标点含义同上。
1 t$ l9 k% C5 c  I% f
0 h8 Z5 b* R: w* K# ?! |  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。
, c. v- _* J  j! V* t: x
" ?9 W' k- X7 M+ w2 e4 U针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

13.4 实验例程设计框架
本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
! S; o4 k: j* c& o
- \9 }# ~3 |3 j5 [3 o

13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）

配套例子：

本章节配套了如下两个例子供大家移植参考：
7 D/ f7 J) P' X
  V7-2011_GUIX 2D Draw
* `/ p6 ?: Y3 Y9 c* l" X
0 D7 J  m  P1 w$ AGUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
; z; w3 L" u8 o
, d) E/ @9 _) |* Q  V7-2012_GUIX Studio 2D Draw
/ G- Z( W6 @. d- x: ]
& U7 \+ u( x8 sGUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

实验目的：

! b/ ~: Z- E+ n3 |; s3 J! \" ]  _/ a本章主要学习GUIX的2D函数绘制。
( H) O3 T8 K" s1 E+ e
( n  ]" p( V- O实验内容：

共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
9 o1 S/ U0 s4 K. k/ [3 ZApp Task Start任务  ：启动任务，这里用作BSP驱动包处理。
: C0 D0 ^/ e" d# U( V4 ?, k. l$ l7 n
& F8 P) n: l/ ~$ \App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

9 u' [4 F) ~9 E2 h0 f5 j+ u3 V9 MApp Task UserIF任务 ：按键消息处理。

- Z! ?0 j' ]/ X+ M0 b% {App Task GUI任务    ：GUI应用任务。
# h. t* R5 D) _4 r# E1 h' l
% s- \! a2 O* A4 Q7 u$ HApp Task STAT任务   ：统计任务。
/ L" L& h! u  p/ }4 t+ p
App Task IDLE任务   ：空闲任务。
0 Q5 ~  r5 B/ H$ G* o7 Y
GUIX System Thread  ：GUI系统任务。
( H+ _+ u3 X) W! B0 `& t0 X% L6 n# F
System Timer Thread任务：系统定时器任务。

. q+ p, {$ s$ f+ p5 e5 U1 {. w6 a实验效果：
, `6 ~6 Q- C2 t  T6 ~
6 y% j1 [7 W5 T

+ f5 ]7 W0 X+ M& _; o
* H) b0 Q1 M4 O* s3 V- qGUIX Studio的界面设计如下：

8 I( f; |" w  z

串口打印任务执行情况：
# `* `: Q+ ]& f) c
* Z* e' b: I' e7 r% z6 z, @/ iIAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
8 ~7 Y' |7 c0 u7 {4 @
8 s4 O8 [& T  [, J# ^) Q

; H( T, s. U4 V8 xEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
) z6 {7 r8 G& }6 o
1 b  R; Z! E7 z! I3 q

: {; o( p5 j' v; l, X
展示里面有乱码是因为Embedded Studio不支持中文。

/ F9 c2 S5 L) I5 e1 U7 Q: J1 {13.6 总结
本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

# V* _1 v6 C5 n+ t; g- ^) r
4 r9 |2 U* S" {" w5 m