13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
' ?8 Q0 s8 D2 |' c4 _13.2 GUIX Studio设置窗口回调
GUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
2 H- @3 M& @2 i0 N9 G  \
' F. b! e! O6 P- u! i新调整的界面效果如下：
% ]# B1 A' C+ {9 t0 l# Y
5 b# M2 Q/ [# _& i. ?: l

文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。
/ C9 h% i6 y- V# I" p  U
$ N- |# N! Z" r; E4 P/ w/ B5 \3 y下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

* [& t' Z& Y$ A- C0 O5 L5 w2 i( ]6 ]

- l% g& D; q* @% v$ V这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。

13.3 GUIX的2D绘制实现
在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
- q& V8 }. U$ e3 u
13.3.1        了解2D绘制函数
# A' o& q( N6 [  dGUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
' Y* V  _0 I* b% x& ~: H

$ \; L0 B0 X  M( Y, [
这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。

3 V, n7 ~( B" F; F2 d# j) a13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：
% Y5 i7 Q! v: ^

& P" G" b% R% J7 Z/ ^( d
! n% y' D( \" v% A# j' NBrush画笔主要定义了如下参数：
7 y; m% a3 x" \5 S& s
, N/ b1 ]2 Z% ]7 F" C- e' ]

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   / ~' X7 }* ^$ n9 {, B) u
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   , ]+ v4 ~. l. s; q6 S
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   6 H8 r. M9 |0 s
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   + e4 L' C6 k$ v7 W
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   + I3 y. D# h% H. L
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    $ A1 U6 L+ \/ c5 t( G
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    
12. } GX_BRUSH;

复制代码

( S) e. x4 t+ o. y. f" X其中画笔样式成员gx_brush_style涉及到多个参数：

1. GX_BRUSH_OUTLINE
   0 I' D6 e0 p3 ~- F: F$ Q
2. GX_BRUSH_SOLID_FILL
   # w$ `: l! `  W1 \- R
3. GX_BRUSH_PIXELMAP_FILL
   ; ?9 h: \# j: ^8 m
4. GX_BRUSH_ALIAS
   5 t& |: u1 F* y. y2 q: k
5. GX_BRUSH_SOLID_FILL
   
6. GX_BRUSH_UNDERLINE
   ! W+ T  I/ G' V' j; W
7. GX_BRUSH_ROUND
   , j& b1 B! F4 I5 j7 k0 V+ Z
8. 
   5 C0 a4 U) e, R; l" ?9 W
9. GX_CANVAS_SIMPLE
   / w1 L3 t# `7 f1 y
10. GX_CANVAS_MANAGED
    5 @- y) o/ Y6 ?" a1 i
11. GX_CANVAS_VISIBLE
    5 v3 l& S5 _- V7 \& h
12. GX_CANVAS_MODIFIED
    ; X- ?9 O7 {  v" r( N
13. GX_CANVAS_COMPOSITE

复制代码

& C2 I" q$ R& w) g8 _) [# s1 P这里将当前用到的三个样式做个说明：
" k3 r+ p: ^8 h+ J8 \; Z7 @) G$ f  A/ H
4 O* y+ E' [9 |# u  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。
4 |7 _6 x3 b9 p4 `9 H4 n  Y5 ?/ X) w
% ?: ~9 X6 ]* j5 P. t% V, e  GX_BRUSH_SOLID_FILL
/ U" E2 r" }1 {6 K- O$ g用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
7 b) {1 V5 O8 E- ^5 R4 C" x/ c5 ]
3 s9 r7 f' C& K! j3 C5 }  GX_BRUSH_ROUND
: Z8 H- O0 r6 d$ t% M* _( n3 t
2 T, g) s0 x& [0 P4 G- v: |用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。

13.3.3        窗口里面做2D绘制的基本框架
窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：

+ a* R/ w& Y" w( N

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   ! R; W2 F) n! p. T( @
3.     GX_RECTANGLE drawto;
   + T# p7 N5 n6 t( J- g
4.     GX_CANVAS *mycanvas;     
   
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
     {& `) Z1 `: j* @
8. 
   2 P( h$ \2 T' S# ?
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    
12.                                 y0,
    
13.                                 x1,
    1 J! w% `$ i/ ?! v* J5 K; `. G& r
14.                                 y1);
    
15. 
    
16.     /* 返回窗口对应的canvas画布 */
    4 h1 W! K& G- n! j% H* |- O
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    2 V" h/ o  ]2 m7 K3 A
19.     /* 在指定的画布上启动绘图。*/
    
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
21. 
    
22.     此处添加代码，调用2D函数绘制
    # t& C; x# V; d4 r4 b: M
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    5 V) `) o9 w- {0 W$ m; B) g. w
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

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

  S! L+ S8 S5 t/ U% w$ m13.3.4        窗口里面2D绘制实例（重要）
  @; t- N- @9 n/ p0 S0 G实例代码如下，本章教程配套例子也是用的这个代码：

1. /*
     E8 k! [3 n3 e5 b+ j0 E
2. *********************************************************************************************************
   ' {( b- ?7 N0 h  z
3. *    函 数 名: _cbWindow0
   # }' Q2 N9 K/ k* a" w3 j
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   ; S& }2 t# h0 V
8. */
   
9. VOID _cbWindow0(GX_WINDOW *widget)
     X, D% V+ G' ^& I9 N
10. {
    
11.     GX_RECTANGLE drawto;
    
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    ! E% t8 t5 U% G7 e; [4 x
15. 
    
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    . a8 O& Q) U4 i2 [) p" G6 z: l/ l3 m
18.     gx_window_draw(widget);
    
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    8 Q7 Z+ |7 c7 Y6 Q9 D' [  S( u
21.     gx_utility_rectangle_define(&drawto,
    8 n. @  K3 o3 ]( \) ]
22.                                 10,
    
23.                                 100,
    
24.                                 400,
    
25.                                 265);
    : |! D: G( D  P% Z! W- M: @
26. 
    
27.     /* 返回窗口对应的canvas画布 */
    
28.     gx_widget_canvas_get(widget, &mycanvas);
    9 D9 U' b2 Y9 }& f
29. 
    
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    
32. 
    
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    
36.     /* 设置笔刷填充的颜色值 */   
    
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    1 ^0 d1 t- K# o5 @
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    
41. 
    + ]5 W! m7 H# P/ a2 p, E" K
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    " @2 q+ i* @" s* k1 M# c
44. 
    
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    
47. 
    
48.     /* 绘制圆圈 */
    
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    
51.     /* 绘制椭圆 */
    ; b4 h  H7 ^- j- t; `
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    & K( ^& B: ]! }; G  E  f7 r' `/ v
56. 
    ) z1 c2 Z) `. k* |
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);
    
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    ! m+ {3 H4 E4 y: t0 p  h* I
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

  gx_window_draw
: @& l5 g& k8 W6 Q# C
作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

: X9 i+ ?1 h' V3 s' M3 n  gx_utility_rectangle_define
/ H' g  T1 L: |0 w" n5 C
* y% C5 y  a4 J5 ^3 Z6 W! A% f# q定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。

  gx_widget_canvas_get

返回窗口对应的canvas画布。

  gx_canvas_drawing_initiate

在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。
: `4 {" I5 c# _+ V$ j  g/ R
2 I6 ^5 x4 M7 A( G! [  gx_context_raw_line_color_set

$ R; |1 {2 o% Y6 s% }' B( @2 {' N设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：

: E6 S5 m* h  U1 l. I

  gx_context_raw_fill_color_set

' q# X' K' j; r4 Y$ }设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

0 k. |1 \* j) D7 B. G( @( B/ r& r  gx_context_brush_style_set

用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
8 P: b. }! H/ \0 P- @5 X% c& }
* g- s/ w1 q: @) S7 i  gx_context_brush_width_set

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

, k6 d, P! t0 u0 t. x9 Q9 f  z5 \  gx_canvas_line_draw

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

  gx_canvas_circle_draw
! a. h! l4 Q; m, f- C6 G. {
圆圈绘制，坐标含义同上。
( t" s% l: p! c7 `
  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
6 j' a  K, B( T. ?& S) Y  O
  gx_canvas_polygon_draw
" t# u  {$ t6 q7 @4 Q0 W多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
" @& }+ X5 Q3 G. h; v
  gx_canvas_rectangle_draw
矩形框绘制，坐标点含义同上。

" S* [+ g  _/ [8 k) K  gx_canvas_drawing_complete
9 h2 k0 Q/ J" u* b7 w用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。
( q+ @; |- t# J: W5 s, m
针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。

0 \2 r3 M& j! P+ q! I( S13.4 实验例程设计框架
7 l9 t/ k5 F3 y+ x# n+ t7 U* C6 U3 k$ D本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。
+ o9 q1 D. H5 m; E

, S! U1 O. H# j7 _2 T% y0 z
3 @8 C6 J  B2 D; H6 b13.5 实验例程
' B9 w% D  ~" \+ R5 ^! ]3 `, q/ h2 s（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
# N/ L8 A1 T9 I* Z; M6 K
4 Z# ^6 @( J, F* _( o2 T& R配套例子：

本章节配套了如下两个例子供大家移植参考：
6 t# L# Q- F3 }3 t( O; b/ P4 C- V
  V7-2011_GUIX 2D Draw

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。

  V7-2012_GUIX Studio 2D Draw

* y. C9 X; h: F$ [# j/ n# k2 u# c! xGUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。
8 h( l5 k2 q' @/ H- h, {2 j4 D& c2 K
$ k% k: w( a; ~! ]: H( s4 j% m实验目的：
7 ^9 n  k& ?0 g6 e# p2 h
本章主要学习GUIX的2D函数绘制。

: z" p) N" d- |实验内容：

# z% F) p$ J, A, b共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。

& w* H! |: ]. O- b$ `+ Z( m3 H; O9 e* [App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

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

2 ^* q  o9 [8 K% UApp Task GUI任务    ：GUI应用任务。

) u& X- u  v' YApp Task STAT任务   ：统计任务。
) _, l. I1 t% g) V6 B) w
8 Z3 i4 z7 T+ ^! D% m- yApp Task IDLE任务   ：空闲任务。

GUIX System Thread  ：GUI系统任务。

# Q/ k& w+ @8 P2 xSystem Timer Thread任务：系统定时器任务。
/ P5 h5 ~3 p2 j6 K1 J
实验效果：

GUIX Studio的界面设计如下：

/ l- O) h7 @3 \' t! A7 o
串口打印任务执行情况：
6 w7 N; Z7 o5 T' }: i8 U' @
# k) Z+ N; ?5 S7 f0 S* z5 |6 L, vIAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：

" S2 A4 d0 B1 G6 ?+ S; Y
5 X9 J# Y# i. C; v& \0 b  WEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：

- a  A4 i3 c. n! K

  d1 P9 r6 {6 y- k
4 y7 L# Z, _$ m4 a- u- e3 o展示里面有乱码是因为Embedded Studio不支持中文。

' A) @0 s( a, p+ Q# ?; l7 k4 d13.6 总结
本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
* ~4 z/ S; e& b# ]' T

$ W8 s3 y. c/ G0 x- M5 ?

( h1 o: ^+ L6 X$ X: _, N9 V