你的浏览器版本过低，可能导致网站不能正常访问！
为了你能正常使用网站功能，请使用这些浏览器。

st-img
chrome st-img
firefox st-img
safari st-img
ie8及以上

【安富莱STemWin教程】第8章 2-D图形库之基本绘图

[复制链接]
baiyongbin2009 发布时间：2015-1-12 11:05
本帖最后由 baiyongbin2009 于 2015-1-12 11:08 编辑

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接
第8章      2-D图形库之基本绘图

    本期主要讲解2-D图形库的基本绘图方法。这些图形库是基于快速高效的算法。当前，只有GUI_DrawArc()函数需要浮点计算，这些函数用PC端的emWin模拟器练习就行，不需要在开发板上面做，太麻烦。
    基本绘制例程可以在显示器中的任意位置绘制单个点、水平线和垂直线以及图形。所有可用的绘制模式均能使用。由于大多数应用程序会频繁调用这些例程，因此对它们的速度尽可能进行了优化。例如，水平线和垂直线函数不需要使用单点例程。
    8. 1  画笔大小
    8. 2  基本绘制
    8. 3  Alpha混合
    8. 5  实验总结

8.1  画笔大小
        GUI_GetPenSize()  返回当前的画笔大小 （像素）。
        GUI_SetPenSize()    设置画笔大小 （像素）。
    画笔大小决定以下矢量绘制操作的厚度：
l  GUI_DrawPoint()
l  GUI_DrawLine()
l  GUI_DrawLineRel()
l  GUI_DrawLineTo()
l  GUI_DrawPolyLine()
l  GUI_DrawPolygon()
l  GUI_DrawEllipse()
l  GUI_DrawArc()
    这里要切记画笔大小只支持上面的几个2D绘图函数，有些是不支持的，下面以GUI_DrawLine()举一个例子，这个例子直接复制到STemWin模拟器下面就可以跑的，主要是画三条不同粗细的直线。
  1. #include "GUI.h"

  3. void MainTask(void) {
  4.     GUI_Init();   
  5.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
  6.     GUI_Clear();                /* 这里只要清屏了，上面设置背景颜色才能起到作用 */   
  7.     GUI_CURSOR_Show();          /* 显示游标       */
  8.     GUI_SetColor(GUI_RED);      /* 设置画笔颜色   */   
  9.     GUI_SetPenSize(1);          /* 设置画笔大小   */
  10.     GUI_DrawLine(0,             /* X起始位置      */                        
  11.                  10,            /* Y起始位置      */
  12.                  200,           /* X结束位置      */               
  13.                  10);           /* Y结束位置      */
  14.     GUI_SetPenSize(4);   
  15.     GUI_DrawLine(0, 100, 200, 100);
  16.     GUI_SetPenSize(8);   
  17.     GUI_DrawLine(0, 200, 200, 200);
  18.     while(1)   
  19.     {
  20.         GUI_Delay(100);   
  21.     }
  22. }
复制代码
实际显示效果如下：
8.1.png

8.2  基本绘制
    STemWin支持的2D基本绘图函数有如下的几个，我这里就不跟大家一一举例了，举几个典型的函数用法：

    8.2.png
     下面这个例程主要用到以下几个函数
        GUI_DrawGradientRoundedH()      绘制用水平颜色梯度填充的圆角矩形。
        GUI_DrawRectEx()                          在当前窗口中的指定位置绘制矩形。
        GUI_DrawRoundedFrame()            在当前窗口中的指定位置绘制指定宽度的圆角框。
        GUI_FillRoundedRect()                   在当前窗口中的指定位置绘制填充的圆角矩形。
     在模拟器上演示例子如下：
  1. #include "GUI.h"

  3. void MainTask(void)
  4. {
  5.     GUI_RECT Rect = { 120, /* Upper left X-position. */
  6.                       0,   /* Upper left Y-position. */
  7.                       219, /* Lower right X-position. */
  8.                       99}; /* Lower right Y-position. */
  9.     GUI_Init();
  10.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
  11.     GUI_Clear();                /* 这里只要清屏了，上面设置背景颜色才能起到作用 */
  12.     GUI_CURSOR_Show();          /* 显示游标 */
  13.     GUI_SetColor(GUI_RED);
  14.     GUI_DrawGradientRoundedH(0, 0, 99, 99, 25, 0x0000FF, 0x00FFFF);
  15.     GUI_DrawRectEx(&Rect);
  16.     GUI_DrawRoundedFrame(0, 110, 99, 210, 20, 10);
  17.     GUI_FillRoundedRect( 120, 110, 219, 210, 20);
  18.     while(1)
  19.     {
  20.         GUI_Delay(100);
  21.     }
  22. }
复制代码
实际显示效果如下：

8.3.png

赞 收藏 评论3 发布时间：2015-1-12 11:05

举报

3个回答
baiyongbin2009 回答时间：2015-1-12 11:10:56
8.3  Alpha混合
    Alpha混合是个非常好的功能，有了这个绘制出来的界面才能更加的华丽，下面详细的介绍一下。Alpha混合是一种合并前景图像与背景来创建半透明效果的方法。Alpha值决定可见的像素数以及背景透露的像素数。
颜色信息
    STemWin内部适用于32位的颜色信息：
l  0-7位：红色
l  8-15位：绿色
l  16-23位：蓝色
l  24-31位：Alpha信息
    Alpha值为0表示不透明，值为255表示完全透明。
工作原理
    Alpha混合完全自动执行。唯一需要做的就是使用GUI_EnableAlpha()启用Alpha混合。在此，8位以上的颜色信息将作为Alpha值管理。下面举一个例子
  1. #include "GUI.h"

  3. void MainTask(void)
  4. {
  5.     GUI_Init();   
  6.     GUI_EnableAlpha(1);          /* 启用或禁用自动Alpha混合 */
  7.     GUI_SetBkColor(GUI_WHITE);   /* 设置背景颜色 */  
  8.     GUI_Clear();                 /* 这里只要清屏了，上面设置背景颜色才能起到作用 */
  9.     GUI_SetColor(GUI_BLACK);     /* 设置字体显示颜色 */   
  10.     GUI_DispStringHCenterAt("Alphablending", 45, 41);
  11.      /* 显示带alpha效果的填充矩形 */
  12.     GUI_SetColor((0x40uL << 24) | GUI_RED);   
  13.     GUI_FillRect(0, 0, 49, 49);
  14.     GUI_SetColor((0x80uL << 24) | GUI_GREEN);
  15.     GUI_FillRect(20, 20, 69, 69);   
  16.     GUI_SetColor((0xC0uL << 24) | GUI_BLUE);   
  17.     GUI_FillRect(40, 40, 89, 89);
  18.     while(1)   
  19.     {
  20.         GUI_Delay(100);  
  21.      }
  22. }
复制代码
实际显示效果如下：
8.4.png

    说一下这个函数GUI_SetAlpha()，这个函数基本处于弃用的状态，主要以上面说的那个函数为主。该函数设置用于所有后续绘制操作的Alpha值。参数Alpha值为0表示不透明（禁用Alpha混合），值为255表示完全透明 （不可见）。请注意，软件Alpha混合会增加CPU负荷。此外，强烈建议在绘制操作完成后，将Alpha值设回默认值。下面针对这个函数举一个例子。
  1. GUI_CONST_STORAGE GUI_BITMAP bmarmfly = {
  2.   198, // xSize
  3.   80, // ySize
  4.   792, // BytesPerLine
  5.   32, // BitsPerPixel
  6.   (unsigned char *)_acarmfly,  // Pointer to picture data
  7.   NULL,  // Pointer to palette
  8.   GUI_DRAW_BMP8888
  9. };

  11. void MainTask(void)
  12. {
  13.      int i;
  14.    
  15.      GUI_Init();
  16. //   GUI_EnableAlpha(1);         /* 启用或禁用自动Alpha混合 */

  18.      /* 绘制蓝色填充的圆圈 */
  19.      GUI_SetColor(GUI_BLUE);
  20.      GUI_FillCircle(100, 50, 49);

  22.      GUI_SetColor(GUI_YELLOW);
  23.      for (i = 0; i < 100; i++)
  24.      {
  25.          U8 Alpha;
  26.          Alpha = (i * 255 / 100);
  27.          GUI_SetAlpha(Alpha);
  28.          GUI_DrawHLine(i, 100 - i, 100 + i);
  29.      }

  31.      GUI_SetAlpha(0x80);
  32.      GUI_DrawBitmap(&bmarmfly, 30, 30);
  33.      GUI_SetColor(GUI_MAGENTA);
  34.      GUI_SetFont(&GUI_Font24B_ASCII);
  35.      GUI_SetTextMode(GUI_TM_TRANS);
  36.      GUI_DispStringHCenterAt("Alphablending", 100, 3);
  37.      GUI_SetAlpha(0); /* Set back to default (opaque) */
  38.    
  39.      while(1)
  40.      {
  41.          GUI_Delay(100);
  42.      }
  43. }
复制代码
实际显示效果如下：
8.5.png

    有这个例子涉及到大量的图片数据，完整的运行例子在本期教程配套的里面有。
    关于alpha函数还有如下两个函数
         GUI_SetUserAlpha()            设置其他值以用于计算要使用的实际Alpha值。
         GUI_RestoreUserAlpha()    恢复用户Alpha混合之前的状态。保存在所指向的结构中。
    看函数说明不好看懂，下面也举一个例子
  1. #include "GUI.h"

  3. void MainTask(void)
  4. {      
  5.     GUI_ALPHA_STATE AlphaState;
  6.     GUI_Init();   
  7.     GUI_EnableAlpha(1);   
  8.     GUI_SetBkColor(GUI_WHITE);   
  9.     GUI_Clear();  
  10.     GUI_SetColor(GUI_BLACK);   
  11.     GUI_DispStringHCenterAt("Alphablending", 45, 41);   
  12.     GUI_SetUserAlpha(&AlphaState, 0xC0);  
  13.     GUI_SetColor(GUI_RED);   
  14.     GUI_FillRect(0, 0, 49, 49);  
  15.     GUI_SetColor(GUI_GREEN);   
  16.     GUI_FillRect(20, 20, 69, 69);   
  17.     GUI_SetColor(GUI_BLUE);  
  18.     GUI_FillRect(40, 40, 89, 89);   
  19.     GUI_RestoreUserAlpha(&AlphaState);      
  20.     while(1)   
  21.     {      
  22.         GUI_Delay(100);   
  23.     }
  24. }
复制代码
实际显示效果如下：
8.6.png


8.4  实验总结
     这些基本的2-D绘图函数很重要，特别是Alpha函数，绚丽的界面设计就靠这些函数了。

赞 评论
决策者 回答时间：2015-1-12 11:25:32
谢谢分享
赞 评论
qianfan 回答时间：2015-1-12 11:51:50
好帖。。。。。。。。
赞 评论

所属标签

STM32团队

STM32团队

意法半导体微控制器和微处理器拥有广泛的产品线，包含低成本的8位单片机和基于ARM® Cortex®-M0、M0+、M3、M4、M33、M7及A7内核并具备丰富外设选择的32位微控制器及微处理器。关注该话题即可发布文章！

最新内容

关于
意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版