【第3版emWin教程】第37章 emWin6.x抗锯齿

教程不断更新中：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429

第37章       emWin6.x抗锯齿

本章节为大家讲解抗锯齿，关于抗锯齿，在前面第21章讲解emWin字体时，有讲解到字体的抗锯齿效果。

什么称之为锯齿和抗锯齿呢？比如线条是由一系列位于显示坐标处的像素近似构成，可能看起来呈锯齿状，尤其是近似的水平线或近似的垂直线，这种现象称为锯齿(aliasing)。而抗锯齿是对线条和曲线进行平滑处理，降低锯齿感。emWin支持抗锯齿效果的2D图形绘制，抗锯齿字体和高分辨率坐标。

37.1 初学者重要提示

37.2 抗锯齿介绍

37.3 抗锯齿API函数实例演示

37.4 模拟器上抗锯齿例程

37.5 实验例程说明（RTOS）

37.6 实验例程说明（裸机）

37.7 总结

37.1 初学者重要提示

1.   抗锯齿的使用相对比较容易，但是也容易出错，用户设置了抗锯齿因子且使能了高分辨率坐标后，一定要记得相应抗锯齿绘制的坐标也要乘以相应的抗锯齿因子，这点要切记，本章37.3小节的例子中都进行了强调。
2.   抗锯齿所有API函数在emWin手册中都有讲解，下图是中文版手册里面API函数的位置

 

下图是英文版手册里面API函数的位置：

 

 

37.2 抗锯齿介绍

抗锯齿通过使背景色与前景色相混合的方法来平滑曲线。背景色与前景色之间使用的阴影越多，抗锯齿效果越好，但计算时间越长。

37.2.1   抗锯齿质量

抗锯齿处理的质量由GUI_AA_SetFactor()函数设定，通过下面的截图给大家说明抗锯齿因子（也就是函数GUI_AA_SetFactor的参数）与对应结果之间的关系。

 

 

第一条线未经抗锯齿处理（因子为1）。第二条线以因子2进行了抗锯齿处理。也就是说，从前景到背景的阴影数为2 x 2 = 4。下一条线以抗锯齿因子3绘制，因而有3 x 3 = 9个阴影，后面几个因子的计算方法相同。一般情况下，因子4足以处理大多数应用，进一步增加抗锯齿因子不会大幅改善结果，但会增加计算时间。

37.2.2   抗锯齿字体

在前面章节介绍字体的时候讲解过2bpp和4bpp字体显示效果，下面再给大家展示下不使用抗锯齿和使用2bpp，4bpp两种抗锯齿下字母C的显示效果：

 

抗锯齿字体可以通过emWin字体小工具FontCvt创建。使用抗锯齿字体的一般目的是改进文字的外观。虽然高质量抗锯齿比低质量抗锯齿处理看起来更好，但计算时间和存储器占用量也会相应增加。低质量(2bpp)字体需要两倍于无抗锯齿处理(1bpp)字体的存储器容量，高质量(4bpp)字体则需要四倍的存储器容量。

37.2.3   高分辨率坐标

在使用抗锯齿绘制图形时，使用的是与常规（无抗锯齿处理）绘图程序相同的坐标，这是默认方式。在函数参数中无需考虑抗锯齿因子，例如，要从(50, 100)到(100, 50)绘制一条抗锯齿线，则编写以下代码：

GUI_AA_DrawLine(50, 100, 100, 50);

借助STemWin的高分辨率功能，大家就可以使用由抗锯齿因子和显示尺寸决定的虚拟空间。使用高分辨率坐标的优势在于图形不但可以置于显示器的每个点阵像素上，而且可以置于每个点阵像素内部。下图展示的是一个高分辨率像素的虚拟空间，其抗锯齿因子为3：

 

 

以抗锯齿因子3，从像素(50, 100)到像素(100, 50)绘制一条高分辨率线条，则需写入以下代码：

GUI_AA_DrawLine(150, 300, 300, 150);  /* 将坐标位置放大3倍，这一点千万不可忘记 */

另外特别注意，使用高分辨率坐标必须通过函数GUI_AA_EnableHiRes()进行使能，如果需要禁止可以调用函数GUI_AA_DisableHiRes()来实现。

37.3 抗锯齿API函数实例演示

StemWin支持的抗锯齿函数主要如下：

 

这里我们选择几个常用的函数进行说明。

37.3.1   函数GUI_AA_DrawArc

•   void GUI_AA_DrawArc(int x0, int y0, int rx, int ry, int a0, int a1);

在当前窗口中的指定位置（x0，y0）绘制x轴方向半径为rx，y轴方向半径为ry，起始角度为a0，结束角度为a1的抗锯齿弧线。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始emWin */
    GUI_Init();

    /* 设置画笔粗细 */
    GUI_SetPenSize(4);
    GUI_SetColor(GUI_RED);
    
    /* 使能高分辨率 */
    GUI_AA_EnableHiRes();

    /* 抗锯齿因子选择1 */
    GUI_AA_SetFactor(1);
    GUI_AA_DrawArc(50*1, 120*1, 50*1, 50*1, 0, 180);

    /* 抗锯齿因子选择3 */
    GUI_AA_SetFactor(3);
    GUI_AA_DrawArc(160*3, 120*3, 50*3, 50*3, 0, 180);

    /* 抗锯齿因子选择6 */
    GUI_AA_SetFactor(6);
    GUI_AA_DrawArc(270*6, 120*6, 50*6, 50*6, 0, 180);

    
    while(1)
    {
        GUI_Delay(10);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

显示效果如下：

 

 

37.3.2   函数GUI_AA_DrawLine

•   void GUI_AA_DrawLine(int x0, int y0, int x1, int y1);

在当前窗口中绘制以（x0，y0）为起点，（x1，y1）为终点的抗锯齿直线。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 设置画笔粗细 */
    GUI_SetPenSize(40);
    GUI_SetColor(GUI_RED);
    
    /* 使能高分辨率 */
    GUI_AA_EnableHiRes();

    /* 抗锯齿因子选择1 */
    GUI_AA_SetFactor(1);
    GUI_AA_DrawLine(50*1, 40*1, 50*1, 120*1);

    /* 抗锯齿因子选择3 */
    GUI_AA_SetFactor(3);
    GUI_AA_DrawLine(150*3,40*3,150*3,120*3);

    /* 抗锯齿因子选择6 */
    GUI_AA_SetFactor(6);
    GUI_AA_DrawLine(250*6, 40*6, 250*6, 120*6);
    
    while(1)
    {
        GUI_Delay(100);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

实际效果如下：

 

 

37.3.3   函数GUI_AA_DrawPolyOutline

•   void GUI_AA_DrawPolyOutline(const GUI_POINT * pPoint, int NumPoints, int Thickness, int x, int y)

在当前窗口指定的位置（x, y）绘制由坐标点数组pPoint中NumPoints个点组成的抗锯齿多边形轮廓，轮廓厚度为Thickness。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/* 宏定义，方便求出数组中成员个数 */
#define countof(Array) (sizeof(Array) / sizeof(Array[0]))

/* 宏定义，抗锯齿因子*/
#define MAG  3

/* 多边形的坐标点 */
static GUI_POINT aPoints[] = {
    { 0*MAG,   0*MAG }, 
    { 15*MAG,  30*MAG}, 
    { 0*MAG,   20*MAG}, 
    {-15*MAG,  30*MAG}
};

/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 使能高分辨率坐标 */
    GUI_AA_EnableHiRes();

    /* 设置前景色 */
    GUI_SetColor(GUI_RED);

    /* 设置抗锯齿因子是3，绘制抗锯齿多边形轮廓 */
    GUI_AA_SetFactor(MAG);
    GUI_AA_DrawPolyOutline(aPoints, countof(aPoints), 3*MAG, 150*MAG, 40*MAG);
    
    while(1)
    {
        GUI_Delay(10);
    }
}

使用这个函数要注意：

1. 通过连接起点和终点，可使绘制的多线条自动闭合，起点不得再次指定为终点。

2. 设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

3. 该函数处理的定义点不能超过10个。如果多边形由10个以上的点构成，则使用GUI_AA_DrawPolyOutlineEx()函数。

实际效果如下：

 

 

37.3.4   函数GUI_AA_DrawRoundedRect

•   void GUI_AA_DrawRoundedRect(int x0, int y0, int x1, int y1, int r);

在当前窗口指定的左上角位置（x0, y0）和右下角位置（x1, y1）绘制圆角半径为r的抗锯齿圆角矩形。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/* 设置抗锯齿因子 */
#define MAG  3

/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 清屏 */
    GUI_SetBkColor(GUI_WHITE);
    GUI_Clear();

    /* 使能高分辨率坐标 */
    GUI_AA_EnableHiRes();

    /* 设置前景色和画笔粗细  */
    GUI_SetColor(GUI_RED);
    GUI_SetPenSize(5);

    /* 设置抗锯齿因子，绘制抗锯齿圆角矩形 */
    GUI_AA_SetFactor(MAG);
    GUI_AA_DrawRoundedRect(10*MAG, 10*MAG, 100*MAG, 100*MAG, 5*MAG);

    while(1)
    {
        GUI_Delay(10);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

实际显示效果如下：

 

 

37.3.5   函数GUI_AA_FillCircle

•   void GUI_AA_FillCircle(int x0, int y0, int r);

在当前窗口指定位置（x0, y0）半径为r的抗锯齿填充圆形。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/* 设置抗锯齿因子 */
#define MAG  3

/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 清屏 */
    GUI_SetBkColor(GUI_WHITE);
    GUI_Clear();

    /* 使能高分辨率坐标 */
    GUI_AA_EnableHiRes();

    /* 设置前景色 */
    GUI_SetColor(GUI_DARKBLUE);

    /* 设置抗锯齿因子是3，绘制抗锯齿填充圆形 */
    GUI_AA_SetFactor(MAG);
    GUI_AA_FillCircle(160*MAG, 120*MAG, 80*MAG);

    while(1)
    {
        GUI_Delay(10);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

实际显示效果如下：

 

 

37.3.6   函数GUI_AA_FillPolygon

•   void GUI_AA_FillPolygon(const GUI_POINT * pPoint, int NumPoints, int x, int y);

在当前窗口指定的位置（x, y）绘制由坐标点数组pPoint中NumPoints个点组成的抗锯齿填充多边形。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"


/* 宏定义，方便获得数组中成员个数 */
#define countof(Array) (sizeof(Array) / sizeof(Array[0]))

/* 宏定义，抗锯齿因子*/
#define MAG  3

/* 多边形坐标点 */
static GUI_POINT aPoints[] = {   
    { 0*MAG,   0*MAG}, 
    { 70*MAG,  -30*MAG}, 
    { 0*MAG,   50*MAG}, 
    {-70*MAG,  -30*MAG}
};

/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 使能高分辨率坐标 */
    GUI_AA_EnableHiRes();

    /* 设置前景色*/
    GUI_SetColor(GUI_RED);

    /* 设置抗锯齿因子是3，绘制抗锯齿填充圆形 */
    GUI_AA_SetFactor(MAG);
    GUI_AA_FillPolygon(aPoints, countof(aPoints), 150*MAG, 40*MAG);
    
    while(1)
    {
        GUI_Delay(100);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

实际运行效果如下：

 

 

37.3.7   函数GUI_AA_FillRoundedRect

•   void GUI_AA_FillRoundedRect(int x0, int y0, int x1, int y1, int r);

在当前窗口指定的左上角位置（x0, y0）和右下角位置（x1, y1）绘制圆角半径为r的抗锯齿圆角填充矩形。

下面是在模拟器上面实际运行的例子：

#include "GUI.h"

/* 宏定义，抗锯齿因子*/
#define MAG  3


/*********************************************************************
*
*       MainTask
*/
void MainTask(void) 
{
    /* 初始化emWin */
    GUI_Init();

    /* 使能高分辨率坐标 */
    GUI_AA_EnableHiRes();

    /* 清屏 */
    GUI_SetBkColor(GUI_WHITE);
    GUI_Clear();

    /* 设置多边形颜色，多边形抗锯齿因子，然后绘制抗锯齿圆角填充矩形 */
    GUI_SetColor(GUI_DARKBLUE);
    GUI_AA_SetFactor(MAG);
    GUI_AA_FillRoundedRect(10*MAG, 10*MAG, 100*MAG, 100*MAG, 5*MAG);
    
    while(1)
    {
        GUI_Delay(10);
    }
}

要注意设置了抗锯齿因子且使能了高分辨率坐标后，绘制时得乘以相应的因子，这点切不可忘了。

实际显示效果如下：

 

 

37.4 模拟器上抗锯齿例程

官方提供了几个抗锯齿方面的例子，这里将其中三个例子的位置和演示效果展示下，方便大家以后做参考，对于这三个例子，在我们emWin教程第1版的第27章简单进行了讲解，本次新升级的教程不再做讲解：

•   例子1：AA_HiResAntialiasing.c

此例子所在的位置：

 

 

演示效果如下，这里的指针是动态旋转的：

 

 

•   例子2：AA_HiResPixels.c

此例子所在的位置：

 

 

演示效果如下：

 

 

•   例子3：AA_Lines.c

此例子所在的位置：

 

 

演示效果如下：

 

 

37.5 实验例程说明（RTOS）

配套例子：

V7-550_emWin6.x实验_抗锯齿（RTOS）

实验目的：

1. 学习emWin的抗锯齿。
2. emWin功能的实现在MainTask.c文件里面。

实验内容：

1、K1按键按下，串口或者RTT打印任务执行情况（串口波特率115200，数据位8，奇偶校验位无，停止位1）。

2、(1) 凡是用到printf函数的全部通过函数App_Printf实现。

(2) App_Printf函数做了信号量的互斥操作，解决资源共享问题。

3、默认上电是通过串口打印信息，如果使用RTT打印信息：

MDK AC5，MDK AC6或IAR通过使能bsp.h文件中的宏定义为1即可

#define Enable_RTTViewer  1

4、各个任务实现的功能如下：

App Task Start   任务 ：启动任务，这里用作BSP驱动包处理。

App Task MspPro任务 ：消息处理，这里用作LED闪烁。

App Task UserIF  任务 ：按键消息处理。

App Task COM   任务 ：暂未使用。

App Task GUI    任务 ：GUI任务。

μCOS-III任务调试信息（按K1按键，串口打印）：

 

 

RTT 打印信息方式：

 

 

程序设计：

  任务栈大小分配：

μCOS-III任务栈大小在app_cfg.h文件中配置：

#define  APP_CFG_TASK_START_STK_SIZE                      512u

#define  APP_CFG_TASK_MsgPro_STK_SIZE                     2048u

#define  APP_CFG_TASK_COM_STK_SIZE                        512u

#define  APP_CFG_TASK_USER_IF_STK_SIZE                    512u

#define  APP_CFG_TASK_GUI_STK_SIZE                        2048u

任务栈大小的单位是4字节，那么每个任务的栈大小如下：

App Task Start   任务 ：2048字节。

App Task MspPro任务 ：8192字节。

App Task UserIF  任务 ：2048字节。

App Task COM   任务 ：2048字节。

App Task GUI    任务 ：8192字节。

  系统栈大小分配：

μCOS-III的系统栈大小在os_cfg_app.h文件中配置：

#define  OS_CFG_ISR_STK_SIZE                      512u     

系统栈大小的单位是4字节，那么这里就是配置系统栈大小为2KB

emWin动态内存配置：

GUIConf.c文件中的配置如下：

#define EX_SRAM   1/*1 used extern sram, 0 used internal sram */

#if EX_SRAM
#define GUI_NUMBYTES  (1024*1024*24)
#else
#define GUI_NUMBYTES  (100*1024)
#endif

通过宏定义来配置使用内部SRAM还是外部的SDRAM做为emWin的动态内存，当配置：

#define  EX_SRAM     1 表示使用外部SDRAM作为emWin动态内存，大小24MB。

#define  EX_SRAM     0 表示使用内部SRAM作为emWin动态内存，大小100KB。

默认情况下，本教程配套的所有emWin例子都是用外部SDRAM作为emWin动态内存。

emWin界面显示效果：

800*480分辨率界面效果。

 

 

37.6 实验例程说明（裸机）

配套例子：

V7-549_emWin6.x实验_抗锯齿（裸机）

实验目的：

1. 学习emWin的抗锯齿。
2. emWin功能的实现在MainTask.c文件里面。

emWin界面显示效果：

800*480分辨率界面效果。

 

 

emWin动态内存配置：

GUIConf.c文件中的配置如下：

#define EX_SRAM   1/*1 used extern sram, 0 used internal sram */

#if EX_SRAM
#define GUI_NUMBYTES  (1024*1024*24)
#else
#define GUI_NUMBYTES  (100*1024)
#endif

通过宏定义来配置使用内部SRAM还是外部的SDRAM做为emWin的动态内存，当配置：

#define  EX_SRAM     1 表示使用外部SDRAM作为emWin动态内存，大小24MB。

#define  EX_SRAM     0 表示使用内部SRAM作为emWin动态内存，大小100KB。

默认情况下，本教程配套的所有emWin例子都是用外部SDRAM作为emWin动态内存。

37.7 总结

抗锯齿的知识就跟大家讲这么多，相对来说也比较容易，实际应用中用到的地方也不少，望初学者掌握基本使用方法即可，用到的时候再查阅相关API函数。