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

chrome
chrome firefox
firefox safari
safari ie
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扩展软件包
关注我们
微信公众号二维码 微信公众号
手机版二维码 手机版