特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第60章 如何在对话框上绘制2D图形

2 c6 V8 ^% U# S5 W& E

    本期教程主要给大家讲解如何在对话框上绘制2D图形。

    60. 1 使用uCGUIBuler绘制2D图形

    60. 2 总结

7 c8 h/ b6 R1 ?% G/ ~60.1 使用uCGUIBuler绘制2D图形

    通常情况下，如果大家想在对话框上面绘制2D图形的话，可以将STemWin的2D绘制函数放在对话框回调函数中的WM_PAINT消息中实现。

    这里跟大家讲一下如何利用uCGUIBulder4.0在对话框上面绘制简单的横线和竖线。

60.1.1 第一步：建立如下界面

60.1.2 第二步：添加水平和垂直线

    左侧工具箱中有水平线和垂直线的选项：

    下面在对话框上添加一个水平线和一个垂直线，效果如下：

    选中水平线或者垂直线在右下角设置其属性：

    设置好后，显示效果如下：

60.1.3 第三步：将生成代码添加到模拟器中显示

    uCGUIBulder4.0生成代码中对话框回调函数中WM_PAINT消息执行的函数如下：

1. /*****************************************************************
   
2. **      FunctionName:void PaintDialog(WM_MESSAGE * pMsg)
   0 B8 P* n/ Y2 j: D$ Y4 h
3. **      Function: to initialize the Dialog items
   # _- ^: V8 W4 }7 j1 P& S1 @
4. **                                                      
   ( z9 L; N0 a+ R5 J
5. **      call this function in _cbCallback --> WM_PAINT
   
6. *****************************************************************/
   % w+ D% `/ b, G  r4 A) i
7. 
   
8. void PaintDialog(WM_MESSAGE * pMsg)
   0 {: I/ Y. M* c4 x6 |. _
9. {
   
10.     WM_HWIN hWin = pMsg->hWin;
    0 f! {/ b' }- a  {; @4 Z
11.     GUI_SetColor(0x000000);
    4 [  B- b; K! y
12.     GUI_FillRect(125,59,274,68);
    
13.     GUI_SetColor(0x0000ff);
    
14.     GUI_FillRect(321,59,335,208);
    
15. 
    ! @# N( E/ G+ v
16. }

复制代码

    其实里面就是简单的2D函数，如果大家想显示其他的2D图形，只需在这个函数里面加上相应的函数处理即可。

    在模拟器上面显示uCGUIBulder生成的代码（生成的代码在本期教程配套的例子中），效果如下：

60.2 总结

    通过上面讲解的如何在对话框上面显示简单的横线和竖线，大家可以尝试相同的方法在对话框上面显示其它的2D图形。