13.1 初学者重要提示
* ?3 f, \+ s/ a$ U  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
" W- b3 g( p1 }* AGUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
. M% O% v6 n& r$ p# R7 ]
  p$ i( u+ ^+ l/ h* w新调整的界面效果如下：
+ f( G  W3 @+ y0 X
- o: A) t9 a6 Q+ [- G

9 q+ \- ^& h5 k2 N9 `* Y2 ^' r
文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。
! t% R, ~# O: _) k3 k$ W: _+ |/ M; B
下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。

1 F/ _; w$ V$ G; \- Y
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。

7 Q3 L3 _# K3 f- l13.3 GUIX的2D绘制实现
# }, ^. W  h8 Y5 I: X# ]) b, \; i  @在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
& m, z) y+ J- {5 p
( S! a; ^9 r' x9 y1 `13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：

" q6 h& [& m% }

: t" u! `3 v+ G' w. t4 N* `) j3 c
% w9 S% C/ l3 x% P, a" l, |, i2 ]这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
6 m" B1 x: a: n5 C
13.3.2        了解画笔brush函数
画笔函数在context相关的几个API里面：

  @5 r5 H7 `5 P1 T! I% c! G

& P0 |+ @4 U8 ?0 @0 W
4 d. _9 O6 g6 [" ?- FBrush画笔主要定义了如下参数：

1. typedef struct GX_BRUSH_STRUCT
   
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   - v# G; x) K* k- X3 G
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   ; ]9 z/ Z' ^1 V+ h
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   . T5 N% k. u" u6 g2 X
9.     UINT         gx_brush_style;               /* 画笔样式       */
   
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    5 ]$ J' }2 I) Y% v
12. } GX_BRUSH;

复制代码

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

1. GX_BRUSH_OUTLINE
   
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   / a$ c& p5 R1 q+ }0 t* _
5. GX_BRUSH_SOLID_FILL
   ! b/ H, `5 w4 t( c; S8 G. I$ C
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   
8. 
   
9. GX_CANVAS_SIMPLE
   ) y& D% M. q! _4 z& p6 P
10. GX_CANVAS_MANAGED
    1 a6 a+ Q1 ]$ {9 g. U2 e' m% \
11. GX_CANVAS_VISIBLE
    : W1 z. f8 t% Q7 e; N( P
12. GX_CANVAS_MODIFIED
    $ [, w8 m/ T8 N. {+ O/ e
13. GX_CANVAS_COMPOSITE

复制代码

8 r; y4 O  j7 {5 N$ P7 j这里将当前用到的三个样式做个说明：

( ^2 U# R' b) n$ o. d/ N3 P! V  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。
( }" _9 `# F# K% o" w
" y" a' ]1 _1 F1 l0 m# ]  GX_BRUSH_SOLID_FILL
2 v* B, O; G3 I用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。
5 M+ {# R2 y( k7 e. e  N+ V
  GX_BRUSH_ROUND

用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。
; V; j/ ~$ Q" o6 Z  ~- W& m7 X
, r3 Q/ W" r" O( J7 @9 T/ e13.3.3        窗口里面做2D绘制的基本框架
窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
+ l9 h: I$ o" m8 d$ l
  q" j3 Z1 l5 \% ^

1. VOID _cbWindow0(GX_WINDOW *widget)
   - d" P; z5 b; w
2. {
   7 \6 t' h, J" e6 P) m/ R
3.     GX_RECTANGLE drawto;
   ; Q2 u5 Y. M* N  o
4.     GX_CANVAS *mycanvas;     
   * |( X! y8 F9 ^- W3 ~- T' F/ b
5. 
   & N. M$ ~3 ?( ^( U
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   
7.     gx_window_draw(widget);
   
8. 
   
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    $ G* m# y. g& [! L" u
11.                                 x0,
    ) ?  u: C4 Z% Y! h9 z6 d3 O
12.                                 y0,
    
13.                                 x1,
    
14.                                 y1);
    
15. 
    
16.     /* 返回窗口对应的canvas画布 */
    
17.     gx_widget_canvas_get(widget, &mycanvas);
    5 ?" v# ^7 U: [' J1 y) @
18. 
    3 B% ]6 \4 ?' b
19.     /* 在指定的画布上启动绘图。*/
    6 }" Z) G' z9 e3 l, H: D
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    & e& R% |9 W6 ~: G
21. 
      e9 F. o3 ~) C2 h0 n  l/ j
22.     此处添加代码，调用2D函数绘制
    
23. 
    , J& S" {5 y, y4 k0 p
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    0 i6 C4 l8 i" [* l" v1 n
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

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

13.3.4        窗口里面2D绘制实例（重要）
实例代码如下，本章教程配套例子也是用的这个代码：
( a+ h3 c! c# Q: r) w
7 o9 @( N* V# x- O, W  D/ n( @: q

1. /*
   
2. *********************************************************************************************************
   
3. *    函 数 名: _cbWindow0
   7 v3 V* j  [- ]" L) a
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   
6. *    返 回 值: 无
   
7. *********************************************************************************************************
   7 z% r0 v+ C  x3 ~7 ]
8. */
   ; Z! {" L' a' u2 L3 w; j5 A0 V! Z# d
9. VOID _cbWindow0(GX_WINDOW *widget)
   & N  c) U1 z) A* J2 \5 B0 |
10. {
    $ o6 d& W8 d6 Y5 C: [- D9 U4 ?' x; i
11.     GX_RECTANGLE drawto;
    : \4 ?  W! J1 k, m  Z  `& k) C
12.     GX_RECTANGLE tempdraw;     
    $ O! B$ H! J" X* J  P
13.     GX_CANVAS *mycanvas;
    : ^. A9 H; Z  w& D" u" g
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    ) i5 z5 ^1 V. K
15. 
    ! Y$ l$ e( Z4 g5 Q( P( b/ j' N3 d
16. 
    
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
      e1 @9 W& x- v
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    - f% E) e$ u; r) {4 C2 q
23.                                 100,
    
24.                                 400,
    / g$ V$ @/ ~) e
25.                                 265);
    + h) X% f, j$ n" ?4 N1 s$ P4 q
26. 
    # m7 e3 q  c( }
27.     /* 返回窗口对应的canvas画布 */
    ! A% T9 \$ [5 i' x8 R, {( R
28.     gx_widget_canvas_get(widget, &mycanvas);
    
29. 
    ' G; {& J1 V5 C+ ]1 H' g, G% o
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    9 i8 W  ?) R7 I) Q, c9 j
32. 
    ) M3 q5 B  H; F& ]) r
33.     /* 设置笔刷画线的颜色值 */
    
34.     gx_context_raw_line_color_set(0xffff0000);
    
35. 
    & ?" n. O4 m6 t9 t/ }1 t& O. |. B
36.     /* 设置笔刷填充的颜色值 */   
    5 ~: @. s& \1 |% L) b" ~- m
37.     gx_context_raw_fill_color_set(0xff00ff00);
    
38. 
    
39.     /* 通过GX_BRUSH_SOLID_FILL使能圆圈，矩形，多边形等绘制为填充效果 */
    5 @, s: q' i: F! S5 i) g$ d
40.     gx_context_brush_style_set(GX_BRUSH_SOLID_FILL);
    " b/ t0 |  X0 P! R& P! V
41. 
    
42.     /* 设置笔刷线宽 */
    / q- h4 g& Y( Q% J$ s0 J
43.     gx_context_brush_width_set(1);
    ! \' A; V" ~- [* g" r7 n
44. 
    
45.     /* 绘制直线 */
    - U" O+ _0 c2 B
46.     gx_canvas_line_draw(10, 100, 50, 150);
    * M0 M) b( }- p* f; z2 C
47. 
    
48.     /* 绘制圆圈 */
    $ t5 q% Z% \2 Y& S$ [- r0 Y
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    8 U# H2 A1 w2 _! ^
51.     /* 绘制椭圆 */
    1 C8 }) G2 l" s
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
    5 n& Q. o8 k! q
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    
56. 
    
57.     /* 绘制矩形 */
    , h. h3 ]4 X) n- G5 e
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);
    $ @' I! l+ H% |* Z* |
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
66. }

复制代码

2 N8 d4 j: Q- U; s. z& y) g  gx_window_draw

作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。
. P3 l% f; y" ~9 Y& g0 g: P
6 U; y  P! ?2 M% j  gx_utility_rectangle_define
2 A, m8 b/ B1 z$ e+ [
定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的，此函数的后四个参数是左上角位置和右下角位置。
: z; |' O* \: J( Y9 M/ q+ I, r
  gx_widget_canvas_get
# V) ^6 R8 p" u$ i" U' u: R0 ^* G" f; H
' w4 ^) A# O  O+ B返回窗口对应的canvas画布。
9 l5 i0 |' @6 `+ i
  gx_canvas_drawing_initiate

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

- w9 a2 ?: i* Z+ o  gx_context_raw_line_color_set

7 K' J! p) I' j$ o8 t" N设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
& u/ q" j5 @- T1 ~' \
6 i, ~: l( x  J: |. J

7 O2 t% }0 V% G8 W
  gx_context_raw_fill_color_set

设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。
+ r- ], @8 x5 G7 E  X9 |% q# [
9 H! G! l2 s$ ^- Q$ c  gx_context_brush_style_set
+ u) m$ E1 C. ^4 \
用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
9 B& ]% z" P  A
' `  `3 i/ J9 T6 V% S  gx_context_brush_width_set
6 E3 h1 ~3 ?( Z. O0 I
. h. l+ E/ e! f7 s. t* |1 h" e; A' e用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
: \! U) B9 U( I6 H4 C" m
0 ~9 J/ S5 r7 @) R! v  gx_canvas_line_draw

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

  gx_canvas_circle_draw

* _7 X* q- l/ @! b圆圈绘制，坐标含义同上。
0 I- q7 a+ `# R0 k! ^- ^4 s" |
  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
" d1 W. k/ V4 X4 E0 m( Y/ N" o6 c
+ [7 e: y) B: ?; ?& v  gx_canvas_polygon_draw
4 ^9 M2 C# J! h. \3 G/ W/ f/ `5 z多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
( J- O( [) ]' ~/ Y' h
9 E2 y- Q5 o. x7 N6 r6 T. V  gx_canvas_rectangle_draw
$ L7 i. K0 p+ I% E( T' ~6 M- |矩形框绘制，坐标点含义同上。
; ]; o- L6 S5 V6 p1 p4 ~% O
  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

, @* z- C: Q/ |- C, {/ w针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
- V3 x9 K8 @- p/ ^$ F
13.4 实验例程设计框架
本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。

2 Q6 Z2 ]1 U. X

/ I0 ~1 t: c8 t( S: G% ^13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）

0 y  P& ~( F! V1 a* U* s$ F7 `配套例子：
( g7 Z, u& u6 r7 U' W  T' \
; q; g8 g7 d2 l" a  k2 y1 \; O本章节配套了如下两个例子供大家移植参考：

# o  k: q8 H5 R2 R  V7-2011_GUIX 2D Draw

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。
* B& p  Q' f/ J1 v
* I" n$ L& H( w' b1 l) p' Z( P  V7-2012_GUIX Studio 2D Draw

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

实验目的：

本章主要学习GUIX的2D函数绘制。
# [# g2 c/ o0 Q# Y% k( o
% F- ^  ]  Q6 C8 d实验内容：
# v0 ^+ j$ C8 L* t+ Q
共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。

App Task MspPro任务 ：消息处理，这里用作浮点数串口打印。

App Task UserIF任务 ：按键消息处理。
1 A5 `7 T& r% M3 i: x
2 D- T* k: a8 e) ZApp Task GUI任务    ：GUI应用任务。
, n; f! S& Z$ g& K1 Z. A
% |/ [* ?1 e% H2 ?- F& ZApp Task STAT任务   ：统计任务。
9 ~  X6 @8 G7 R% S9 p
App Task IDLE任务   ：空闲任务。

7 Z2 i- R  u3 v- P! GGUIX System Thread  ：GUI系统任务。

: y- D: @6 ?) k) E# ]2 E/ F  TSystem Timer Thread任务：系统定时器任务。
: U) j1 _8 D/ d6 z: Z
. k/ \3 P+ Z/ F, r( l实验效果：
$ L  n4 o3 d/ I/ z0 ?; E4 K4 f% B/ `

6 Z' r6 E  X  p  w- M) N) Y  EGUIX Studio的界面设计如下：

+ U5 `5 Q  M/ N

8 [$ w$ W" @  g) H9 A! D
+ G5 X3 N; `$ ^: l" C+ `  f串口打印任务执行情况：

IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
" T. I! u; T# U4 I& i2 E4 t

! J1 J, R. x* ]: ^+ ^Embedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
5 _3 B" [8 A4 e. [/ L! B# ?/ y
4 `3 K; {' X, O2 M3 e, F, `

展示里面有乱码是因为Embedded Studio不支持中文。

" S* r& f; w5 X5 I  c- J- Z8 z7 J13.6 总结
- i3 e# J- I. F6 k$ v本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。






1 t9 ^3 y6 S" i  ]; U: s