13.1 初学者重要提示
  本章节教程的3.4小节是重点，对每个函数的使用都进行了说明。
13.2 GUIX Studio设置窗口回调
0 k1 H% x  L& l' n) g) wGUIX Studio的设置方法与第11章一样，我们这里仅把控件的位置和大小做了调整，腾出来的位置方便2D图形绘制。
' _+ c! z5 f; T
$ O5 r( F; V- U( s新调整的界面效果如下：
& y6 V* q) B) Y( r

/ i. D7 [0 k6 `8 ]
文本控件和按钮控件以外的区域，我们都可以做2D绘制。为了让800*480分辨率显示屏和480*272分辨率显示屏都可以正常显示，我们后面的2D绘制也会在480*272的范围内绘制。

6 m5 M( Q2 V8 Z+ @. N下面我们为窗口控件设置一个Draw Function，此功能是窗口的绘图回调函数。在这个回调函数里面，大家可以绘制任意的2D图形。
; y! g* N9 ]/ L. |+ H3 _8 r

+ t5 ~; o7 V6 z& g* g
这里为Draw Function设置的回调函数名为_cbWindow0，然后就可以使用GUIX Studio生成新的代码。生成的代码移植到硬件平台的方法看第12章即可。

13.3 GUIX的2D绘制实现
  z6 |& v6 G' ^8 |  g" u! Y在GUIX Studio上设置好绘图函数名后，剩下就是在程序里面实现2D绘制，这里把实现方法为大家做个说明。
) ]1 B% M" v; n2 R; }# i' I  _7 x
13.3.1        了解2D绘制函数
GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：
4 I# S4 M' {1 K$ \& r/ V

5 s. T. J2 m. Q# j, \+ k9 M# J
这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路，下面举例时再为大家细说。
% m2 D8 y% c& o3 v! I
13.3.2        了解画笔brush函数
6 k+ G" t& `3 a8 w! \1 m画笔函数在context相关的几个API里面：

6 W! z9 |, ]; r: xBrush画笔主要定义了如下参数：

& a. Y+ v2 l1 |, M5 C' F. B

1. typedef struct GX_BRUSH_STRUCT
   ! `: `' Z- S; J, c' \, |
2. {
   
3.     GX_PIXELMAP *gx_brush_pixelmap;            /* 用于位图       */
   3 e  H( D6 ?; G! O2 t& e* O- u
4.     GX_FONT     *gx_brush_font;                /* 用于文本字体   */
   . z) C6 Y! v+ A! J9 E4 {* `8 q
5.     ULONG        gx_brush_line_pattern;        /* 用于虚线绘制   */
   
6.     ULONG        gx_brush_pattern_mask;        /* 用于虚线绘制   */
   & {6 G; W! {! m* Q+ ]: J/ z+ s! T6 ]: P
7.     GX_COLOR     gx_brush_fill_color;          /* 填充颜色值     */
   
8.     GX_COLOR     gx_brush_line_color;          /* 画线颜色值     */
   1 E: z0 Z8 c  e- I$ c
9.     UINT         gx_brush_style;               /* 画笔样式       */
   / R; I+ h4 f4 X; g+ l0 o4 M
10.     GX_VALUE     gx_brush_width;               /* 画笔线宽       */
    
11.     UCHAR        gx_brush_alpha;               /* 用于Alpha混合 */
    # Y! w) y1 q: k: H
12. } GX_BRUSH;

复制代码

% C2 S2 ~# P8 \% k4 ?6 o其中画笔样式成员gx_brush_style涉及到多个参数：

1. GX_BRUSH_OUTLINE
   $ R2 n1 R: }( A  p* r' T
2. GX_BRUSH_SOLID_FILL
   
3. GX_BRUSH_PIXELMAP_FILL
   
4. GX_BRUSH_ALIAS
   7 l  j8 p$ t  z5 k# N" i1 h
5. GX_BRUSH_SOLID_FILL
   " h. O( i% u, ?' g& r8 C
6. GX_BRUSH_UNDERLINE
   
7. GX_BRUSH_ROUND
   ) m, R6 S# y/ ]; H4 N3 }
8. 
   
9. GX_CANVAS_SIMPLE
   + {! D/ m% F) V4 P: N
10. GX_CANVAS_MANAGED
    $ O& E( b; _- Q0 g8 X, t
11. GX_CANVAS_VISIBLE
    
12. GX_CANVAS_MODIFIED
    
13. GX_CANVAS_COMPOSITE

复制代码

+ s5 \- P# t% N3 c, f这里将当前用到的三个样式做个说明：
6 ?7 g4 n  P3 Z* G# {% L3 M- y& l6 _  [2 _
$ p6 }- D8 F9 Z  GX_BRUSH_ALIAS
用于实现画线，椭圆，圆圈，多边形等抗锯齿效果。

9 y. \8 g6 g0 Q9 I  GX_BRUSH_SOLID_FILL
用于实现椭圆，圆圈，矩形，多边形等图形的填充效果，如果不使能此选项，绘制的是图形轮廓。

* A$ i. Q. S" _) }  GX_BRUSH_ROUND

/ e4 ~0 i0 h3 a% V4 e) g0 W用于设置画线功能时，将直线两端的截面设置成圆形，默认是方形的。

13.3.3        窗口里面做2D绘制的基本框架
* n) F' T  a7 t& x& B: I; C2 \4 O窗口的Draw Function绘图回调函数实现框架如下，大家在这个框架里面添加自己的2D功能即可：
. z; U9 o% x+ U) ^9 ~% b
' v' q% Y" ]" v+ s

1. VOID _cbWindow0(GX_WINDOW *widget)
   
2. {
   4 j; l' ^" T# E  o, E' m! b' P2 B
3.     GX_RECTANGLE drawto;
   0 U0 H: V  G9 w
4.     GX_CANVAS *mycanvas;     
   & _) S( [1 ]4 n" J/ \# J( K3 N  M$ }
5. 
   
6.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
   # C6 F  r" D  v1 B; B& I7 L- J
7.     gx_window_draw(widget);
   
8. 
   ( k8 L. j; t6 Z$ ^, G; J9 R7 @/ R
9.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
   
10.     gx_utility_rectangle_define(&drawto,
    
11.                                 x0,
    
12.                                 y0,
    * d0 r( J( d. N% o  F
13.                                 x1,
    
14.                                 y1);
    
15. 
    & r' \0 M1 B4 y: R
16.     /* 返回窗口对应的canvas画布 */
    
17.     gx_widget_canvas_get(widget, &mycanvas);
    
18. 
    
19.     /* 在指定的画布上启动绘图。*/
    . J8 K2 W3 V4 |: w; i" w; X  I
20.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    7 t- x2 M0 b* I: s8 [1 ?& M3 Y
21. 
    ) s- }# o9 u* e0 V
22.     此处添加代码，调用2D函数绘制
    
23. 
    
24.     /* 绘制完毕，用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    
25.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    
26. }

复制代码

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

13.3.4        窗口里面2D绘制实例（重要）
实例代码如下，本章教程配套例子也是用的这个代码：
/ W7 J! q! _7 s6 z6 C% N
$ I0 b9 b% L& V, k9 q2 {

1. /*
   : Q* H7 }1 g( \. ?
2. *********************************************************************************************************
   
3. *    函 数 名: _cbWindow0
   5 D" I. k: m7 o; ~7 T  ~2 Y
4. *    功能说明: 窗口回调函数
   
5. *    形    参: widget 窗口句柄
   ( P" |8 p2 P% _5 g. I" G+ V
6. *    返 回 值: 无
   
7. *********************************************************************************************************
     l$ Z5 s, S. G# O* {
8. */
   . h# A  i% X; b3 m, s; d8 B
9. VOID _cbWindow0(GX_WINDOW *widget)
   7 @: S4 `6 W5 B+ I
10. {
    / R; [7 g: m$ h% ~
11.     GX_RECTANGLE drawto;
    
12.     GX_RECTANGLE tempdraw;     
    
13.     GX_CANVAS *mycanvas;
    ) _6 X- S+ H8 R7 U$ Z; f6 i
14.     GX_POINT my_polygon[3] = { { 150, 210 }, { 250, 210 }, { 200, 260 } };
    
15. 
    
16. 
    - j" P* h) f% ]" |  T  x) P
17.     /* 默认的窗口绘制回调函数，即默认界面效果绘制 */
    
18.     gx_window_draw(widget);
    " |9 ?% p( ?, Y9 [8 `6 a6 P) M
19. 
    
20.     /* 定义一个矩形框，后续的2D绘制函数都是在这个矩形范围内绘制的 */
    3 i3 {3 {2 ^" C, p! c
21.     gx_utility_rectangle_define(&drawto,
    
22.                                 10,
    
23.                                 100,
    3 r) I: r# A4 a
24.                                 400,
    
25.                                 265);
    9 ]8 A1 x9 s2 s, u) p; j+ ]
26. 
    5 t/ B* R7 A3 k; V
27.     /* 返回窗口对应的canvas画布 */
    / L6 E6 a! N1 K1 T' U
28.     gx_widget_canvas_get(widget, &mycanvas);
    0 j& j1 R( D$ e7 v! L! r5 x
29. 
    ! D3 B5 X; t$ d
30.     /* 在指定的画布上启动绘图 */
    
31.     gx_canvas_drawing_initiate(mycanvas, widget, &drawto);
    * k, K! l0 @' b! n! s/ E0 s
32. 
    
33.     /* 设置笔刷画线的颜色值 */
    5 `5 O% A1 M+ y8 j' m4 ~5 f* w. o
34.     gx_context_raw_line_color_set(0xffff0000);
    & ]: M! S8 f( ]+ ?, T! v& D( U
35. 
    ! S6 ~. S9 ~$ c4 l9 H, |
36.     /* 设置笔刷填充的颜色值 */   
    / ^) f+ s" G1 @
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. 
    ! |8 \" s, h+ G/ k0 S, C9 B. ~
42.     /* 设置笔刷线宽 */
    
43.     gx_context_brush_width_set(1);
    4 A/ \3 \; j7 @- L; [5 r5 W, {
44. 
    - ^& |& D5 Y1 S/ o
45.     /* 绘制直线 */
    
46.     gx_canvas_line_draw(10, 100, 50, 150);
    : n5 b  h, g* b
47. 
    7 G0 u9 C/ X/ y( g9 C5 y
48.     /* 绘制圆圈 */
    + r- d# r8 {- [
49.     gx_canvas_circle_draw(120, 150, 50);
    
50. 
    . b* k2 O6 w  M. K
51.     /* 绘制椭圆 */
    , E1 ?& E/ _" a- }; |
52.     gx_canvas_ellipse_draw(300, 150, 100, 50);
    
53. 
      {& q5 u9 _* O( x4 C/ Y) e* X7 I
54.     /* 绘制多边形 */
    
55.     gx_canvas_polygon_draw(my_polygon, 3);
    . r2 K( u) ~9 b# |$ A$ B
56. 
    
57.     /* 绘制矩形 */
    4 q  t% a& L& x; K. Z3 ~
58.     tempdraw.gx_rectangle_left = 30;
    ( ^% H# }7 m' z. x
59.     tempdraw.gx_rectangle_top = 210;
    4 i( V4 i+ E+ O2 i3 y$ O& t. H  G
60.     tempdraw.gx_rectangle_right = 100;
    ; K! o( U; I) p
61.     tempdraw.gx_rectangle_bottom = 260;
    
62.     gx_canvas_rectangle_draw(&tempdraw);
    
63. 
    
64.     /* 用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用 */
    % v# r: x9 X- S2 ]
65.     gx_canvas_drawing_complete(mycanvas, GX_TRUE);
    8 I% ^3 t3 g% t, Y2 X
66. }

复制代码

  gx_window_draw

% q8 ~. P! w' _3 I: T5 @9 C作为窗口的Draw Function绘图回调函数，此函数用于窗口默认效果的绘制。

  gx_utility_rectangle_define

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

/ A: U7 {& V" L9 t; g3 F  gx_widget_canvas_get

' z, |- C2 N5 a: i返回窗口对应的canvas画布。

  gx_canvas_drawing_initiate

( G, B& @( |, f在指定的画布上启动绘图。此功能在GUIX内部被延迟绘图算法调用，在需要画布时自动执行更新。 但是允许应用程序绕过延期绘图算法并立即执行。首先调用gx_canvas_drawing_inititate在画布上绘画。然后调用所需的绘图函数，最后调用gx_canvas_drawing_complete即可。
& x! h0 F& {4 n$ M) v8 R- K1 @! f
, q; O2 Y( _: {' `1 Q, c8 m9 F& U6 x  gx_context_raw_line_color_set

设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下：
" \! f, E  p0 l/ @
/ g1 M: h0 C, z1 Z! u  Q

& s: A' U8 l. K) @  gx_context_raw_fill_color_set
, F2 K, G" j# [  R' g) ~
& K3 `5 Y) I. u# g7 f- \设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值。

  gx_context_brush_style_set

用于设置笔刷的样式，我们这里设置了GX_BRUSH_SOLID_FILL，表示圆圈，矩形，多边形等绘制为填充效果。如果不设置此样式，表示仅显示一个轮廓。这里特别注意一点，各种样式参数可以通过或操作全部执行，比如GX_BRUSH_SOLID_FILL | GX_BRUSH_ALIAS。
9 E% W) [8 W+ i7 s' o
  gx_context_brush_width_set
; M) P; S. m8 o3 a  g' Y
用于设置笔刷线宽，此线宽对直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都起作用。注意，对于这些2D绘制，必须要设置线宽才可以正常显示。
9 {$ F% f" C  o* n
  gx_canvas_line_draw

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

- H, ?% c) E- ]  gx_canvas_circle_draw

- ^/ Y, `& I- L8 U( V' F8 }* h圆圈绘制，坐标含义同上。
, E! a6 Z1 e* _) s3 A
( }/ |8 j6 |. a5 i. [9 s) P  gx_canvas_ellipse_draw
椭圆绘制，坐标含义同上。
( R) o7 n+ {! E9 L; ]
; A7 n% e, F0 U/ Y& q  gx_canvas_polygon_draw
多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。
( n* M# ]9 ?; o
- H9 N8 }$ s3 F% D; z  gx_canvas_rectangle_draw
8 Z7 v- Z0 ^/ m, K1 ]' z- m矩形框绘制，坐标点含义同上。

, z, w5 A2 f, k# P# T2 }  gx_canvas_drawing_complete
用于强制立即绘制，注意，务必和gx_canvas_drawing_initiate成对调用。

针对这个实例，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。
  U0 @3 [2 h, Y3 E7 X. `
' A1 g$ }& V+ S$ J1 q13.4 实验例程设计框架
* ]$ \8 W! e. M本章例程的重点是GUIX任务的实现，任务中专门为窗口设置了一个Draw Function绘图回调函数。

13.5 实验例程
（注，如果是电阻屏，需要做触摸校准，校准方法看本教程附件章节A）
5 x8 p! u0 V2 A2 R3 k
1 X! W1 V9 d# o3 u, m4 }' Q, G5 G配套例子：
- I9 a' \- C* |, S! W
本章节配套了如下两个例子供大家移植参考：
9 C! G" x  {1 [
* B7 A. i: ?. `3 v  V7-2011_GUIX 2D Draw

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

  V7-2012_GUIX Studio 2D Draw
; y0 O* R! W" W
0 y* Q; R3 D; x. jGUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

1 _4 v/ @$ @' l. N实验目的：

本章主要学习GUIX的2D函数绘制。

" U( P7 p6 p+ |* G- O5 t3 m+ q实验内容：

共创建了如下几个任务，通过按下按键K1可以通过串口打印任务堆栈使用情况
App Task Start任务  ：启动任务，这里用作BSP驱动包处理。
! k+ k# h) [* B8 d) U7 J% [
# r4 S8 ?1 r: dApp Task MspPro任务 ：消息处理，这里用作浮点数串口打印。
$ a$ |& v: h/ @0 i% Y0 M! J* r( C
$ H5 j' e3 f$ u2 T+ A+ ZApp Task UserIF任务 ：按键消息处理。

$ i/ G% [8 z8 a% k3 n7 SApp Task GUI任务    ：GUI应用任务。
# U. E. k0 T; K$ X* z
App Task STAT任务   ：统计任务。
$ h# a* l2 {0 e; o$ V
1 ^1 [1 _- V; rApp Task IDLE任务   ：空闲任务。
$ l  ^5 M3 _5 V: Q' P0 w0 b; J
% R3 H- M, y' Y3 cGUIX System Thread  ：GUI系统任务。
  g5 m. ^) O$ i
* @5 W& f6 w+ ?7 XSystem Timer Thread任务：系统定时器任务。

实验效果：
9 \$ _' K2 J* }

" D0 R4 V6 ]9 l0 a
9 J$ F; l% f, A7 c" PGUIX Studio的界面设计如下：

1 c/ ^7 R5 H) N; Q* A串口打印任务执行情况：
2 w& u+ X( t0 \6 e* |! y' Y( L
7 u6 ?: k6 f( I! g$ \IAR，MDK AC5和AC6工程可以串口打印任务执行情况：按开发板的按键K1可以打印，波特率 115200，数据位 8，奇偶校验位无，停止位 1：
9 `, d- x! F8 L' O

+ _" Q# R. O/ [0 ]/ q0 O: t/ PEmbedded Studio（GCC）平台的串口打印是通过其调试组件SEGGER RTT做的串口打印，速度也非常快，打印效果如下：
& j. H' x' ?! F3 e/ _1 ~
3 t9 D2 Z( P4 N7 y" u$ ], F

5 H# J8 I: y4 ?9 b3 [8 T展示里面有乱码是因为Embedded Studio不支持中文。

* W+ j/ b) n. u13.6 总结
2 H: P% j: y0 N0 `6 F& f" L1 ]本章节主要为大家讲解了GUIX窗口任意位置绘制2D图形，推荐大家设置不同的参数看效果，熟练掌握这些函数的用法，这样用起GUIX也得心应手。


: j) {# ]$ G& v* v3 L* R
  o# r/ w4 s& h% [5 I( T
' }& L( u8 G# U( |  G0 W& J
3 N# t* r. K" p! v, O
9 y! w% N2 X9 j" @) R2 Y