EGE专栏:EGE专栏

上一篇:EGE基础入门篇(五):窗口简单操作

下一篇:

EGE基础入门篇(六)图形的绘制

一、基本图形

1. EGE提供的基本图形


​EGE绘制图形相关库函数文档 https://xege.org/manual/api/draw/index.htm​


  EGE提供了如下图所示的一些基本图形,包括 线框图形填充图形

EGE基础入门篇(六)图形的绘制_抗锯齿

  在图中,列出了图形对应的函数。函数分为普通绘图函数高级绘图函数

  高级绘图函数可以绘制出更高质量的图形,减少图形边缘的锯齿感,并且图形使用的是 ARGB颜色,可以设置透明度,而普通绘图函数会忽略颜色透明度,只能使用RGB颜色

  与此同时,透明度和抗锯齿带来的更大的计算开销,同样大小的图形,高级绘图函数所需的时间可能会是普通绘图函数的1~3倍。

2. 基本图形的绘制

2.1 图形样式设置


  绘制图形前需要先设置好前景色填充色、线宽和线型等样式相关的设置,因为这些设置只对之后的图形绘制生效。如果先绘制图形,再设置样式,那么已经绘制出的图形是不会因此而改变样式的。


2.1.1 设置颜色

  可以通过setbkcolor_f(), setcolor()setfillcolor() 分别设置背景色,前景色和填充色。

  设置对后续所有的绘图都有效,因此不需要频繁设置。 在绘图之前,如果不确定之前的颜色设置,此时便可以调用。设置后,如果后面连续的绘图都是同样的颜色,则可以不用再设置。

setbkcolor(WHITE);                //设置背景色
setcolor(EGERGB(0x30, 0x80, 0xFF); //设置前景色
setfillcolor(EGEARGB(0x80, 0xB0, 0xB0, 0x20)); //设置填充颜色

EGE基础入门篇(六)图形的绘制_背景色_02

示例程序

EGE基础入门篇(六)图形的绘制_EGE_03

#include <graphics.h>

int main()
{
initgraph(600, 600, INIT_RENDERMANUAL);
setbkcolor(EGERGB(0xFF, 0xFF, 0xFF)); //设置背景色为纯白
ege_enable_aa(true); //开启抗锯齿

//填充椭圆
setfillcolor(EGEACOLOR(0xA0, BLUE));
ege_fillellipse(200, 100, 200, 200);

//填充矩形
setfillcolor(EGEARGB(0xFF, 0xFF, 0x20, 0xA0));
ege_fillrect(100, 200, 400, 200);

//直线
setcolor(EGEACOLOR(0xFF, RED));
ege_line(50, 50, 500, 500);

//多边形顶点数和顶点坐标
int numPoints = 3;
ege_point polyPoints[3] = { {560, 460}, {560, 100}, {100, 460} };

//填充多边形
setfillcolor(EGEARGB(0x50, 0x00, 0x20, 0xFF));
ege_fillpoly(numPoints, polyPoints);

getch();
closegraph();

return 0;
}

2.1.2 设置线宽

  调用 setlinewidth() 可以设置线条宽度。​​(EGE19.01及之前的版本需要在setlinewidth()之后调用一次setcolor()才会生效)​

EGE基础入门篇(六)图形的绘制_图形库_04

函数声明

void setlinewidth(float width, PIMAGE pimg = NULL);// 设置当前线宽

示例程序

#include <graphics.h>

int main()
{
initgraph(600, 600, INIT_RENDERMANUAL);
setbkcolor(EGERGB(0xFF, 0xFF, 0xFF)); //设置背景色为纯白
ege_enable_aa(true); //开启抗锯齿

setcolor(EGEACOLOR(0xFF, BLACK)); //设置线条颜色

//绘制线宽为1的直线
setlinewidth(1);
ege_line(20, 20, 300, 200);

//绘制线宽为2的直线
setlinewidth(2);
ege_line(200, 300, 400, 40);

//绘制线宽为3的直线
setlinewidth(3);
ege_line(40, 400, 500, 400);

//绘制线宽为4的直线
setlinewidth(4);
ege_line(300, 300, 400, 300);

getch();
closegraph();

return 0;
}

2.2 普通绘图函数与高级绘图函数

  普通绘图函数与高级绘图函数的区别就是,普通绘图函数没有抗锯齿功能,并且忽略颜色透明度。这样绘制出来的图形都是不透明的,并且图形边缘有明显的锯齿感,图形很不美观。

EGE基础入门篇(六)图形的绘制_抗锯齿_05

  高级绘图函数 在绘图时会根据ARGB颜色中的透明度背景颜色按比例混合,可以有透明效果。并且可以开启抗锯齿,边缘变得平滑,绘图效果较好。

EGE基础入门篇(六)图形的绘制_ege_06

2.3 普通绘图函数的使用


详细内容请阅读:
EGE基础:基础绘图篇​​EGE基础:光栅操作篇​


  普通绘图函数在使用前,需要设置好相应的填充颜色,线条颜色等等。即使不设置,也可以画出图形,只是图形颜色可能不符合。此外,还可以设置线宽等,还有光栅操作码等等设置。

普通绘图函数使用流程:

EGE基础入门篇(六)图形的绘制_图形库_07

普通绘图函数使用流程:

2.3 高级绘图函数的使用


详细内容请阅读: EGE基础:高级绘图篇


  高级绘图函数是一系列命名带有 ege_ 前缀的绘图函数。

  普通绘图函数的使用很简单,传入正确的参数调用即可。而高级绘图函数有抗锯齿的功能,这个是默认不开启的,需要进行设置。

高级函数使用流程

  流程如下图所示,相比普通绘图函数仅仅多了一个抗锯齿的设置,并且抗锯齿设置并不是必需的,可以不设置,这时就如果普通绘图函数一样的使用方法。在创建窗口后设置一次即可将窗口的抗锯齿功能打开,不需要对窗口多次调用ege_enable_aa()。

EGE基础入门篇(六)图形的绘制_EGE_08

  但是有一个需要注意, 由于高级绘图函数使用的是ARGB颜色,所以当颜色的透明度为0时将看不到绘制出的图形。 使用前确保颜色的透明度不为0。

  由于EGE19.01及之前的版本,将RGB颜色定义为透明度为0的ARGB颜色,所以直接设置为RGB颜色时,高级绘图函数绘制出的图形是看不到的,需要使用 EGEACOLOR() 为其设置透明度。或者使用 EGEARGB() 直接定义ARGB颜色。

setfillcolor(EGEACOLOR(0xFF, BLUE));  //设置ARGB填充颜色,利用EGEACOLOR设置RGB颜色透明度
setcolor(EGEARGB(0x80, 0xFF, 0x80, 0xA0)); //设置ARGB前景色

2.3.1 高级绘图函数使用示例

  以下为高级绘图函数的使用示例,可以看到,除了多了一个抗锯齿的设置**ege_enable_aa()**外,其它使用和普通绘图函数没有区别。

EGE基础入门篇(六)图形的绘制_图形库_09

#include <graphics.h>

int main()
{
initgraph(500, 500, INIT_RENDERMANUAL);
setbkcolor(EGERGB(0xFF, 0xFF, 0xFF)); //设置背景色为纯白

//步骤一:开启抗锯齿(可不设置,默认为不开启)
ege_enable_aa(true);

//步骤二:绘制前设置好相应的ARGB颜色
//步骤三:调用高级绘图函数

//黄色三角形
setfillcolor(EGEARGB(0xFF, 0xFF, 0xFF, 0x00));
int numPoints = 3;
ege_point polyPoints[3] = { {100, 100}, {100, 400}, {400, 400} };
ege_fillpoly(numPoints, polyPoints);

//蓝色正方形左上角(100, 200),边长200
setfillcolor(EGEARGB(0xFF, 0x00, 0x80, 0xFF));
ege_fillrect(100, 200, 200, 200);

//品红色的半透明圆
setfillcolor(EGEARGB(0x80, 0xFF, 0x00, 0xFF));
ege_fillellipse(200, 100, 200, 200);

getch();

closegraph();

return 0;
}

2.4 抗锯齿绘图

太极图

  可以看到,图形边缘是十分的光滑,没有普通绘图函数那种严重的锯齿感。

EGE基础入门篇(六)图形的绘制_抗锯齿_10

#include <graphics.h>
#include <cmath>

//以(cx, cy)为中心的圆环,外圆半径为outerRad, 颜色为outerColor,内圆半径为innerRad, 颜色为innerColor
void annulus(float cx, float cy, float outerRad, color_t outerColor, float innerRad, color_t innerColor);

//以(cx, cy)为中心绘制半径为radius的角度为angle的太极图
void taiJi(float cx, float cy, float radius, float angle);

int main() {
initgraph(640, 640, INIT_RENDERMANUAL);
setbkcolor(WHITE);

//开启抗锯齿,使圆更平滑
ege_enable_aa(true);

float angle = 0; //旋转角度

//绘制太极图
taiJi(320, 320, 200, angle);

getch();

closegraph();
return 0;
}

//圆环
void annulus(float cx, float cy, float outerRad, color_t outerColor, float innerRad, color_t innerColor)
{
setfillcolor(outerColor);
ege_fillellipse(cx - outerRad, cy - outerRad, 2 * outerRad, 2 * outerRad);
setfillcolor(innerColor);
ege_fillellipse(cx - innerRad, cy - innerRad, 2 * innerRad, 2 * innerRad);
}

void taiJi(float cx, float cy, float radius, float angle)
{
float left = cx - radius, top = cy - radius;
float width = 2 * radius, height = 2 * radius;
color_t colWhite = EGEACOLOR(0xFF, WHITE), colBlack = EGEACOLOR(0xFF, BLACK);

//白半圆
setfillcolor(colWhite);
ege_fillpie(left, top, width, height, angle + 90, 180);

//黑半圆
setfillcolor(colBlack);
ege_fillpie(left, top, width, height, angle - 90, 180);

//鱼眼中心偏移位置
float radian = (angle + 90) * PI / 180;
float dx = radius / 2 * cos(radian), dy = radius / 2 * sin(radian);

//黑鱼头部
annulus(cx + dx, cy + dy, radius / 2, colBlack, radius / 6, colWhite);
//白鱼头部
annulus(cx - dx, cy - dy, radius / 2, colWhite, radius / 6, colBlack);

//太极黑边框
setlinewidth(2);
setcolor(colBlack);
ege_ellipse(left, top, 2 * radius, 2 * radius);
}

2.5 填充图形的边框

  普通绘图函数的填充图形中,除了 填充矩形bar() 之外,其余的都带有边框。所以普通绘图时不仅要设置填充颜色,还需要设置前景色

setfillcolor(); //设置填充颜色
setcolor(); //设置边框颜色

fillellipse(); //绘制带边框的填充圆

EGE基础入门篇(六)图形的绘制_背景色_11

  高级绘图函数的填充图形是没有边框的,只需要设置填充颜色即可。如果需要边框,可以先画填充图形,再绘制同样形状的线框图形

高级绘图函数绘制带边框的填充圆:

setfillcolor(); //设置填充颜色
setcolor(); //设置边框颜色

ege_fillellipse(); //先画填充圆
ege_ellipse(); //再画线框

3. 组合图形


编辑中...


EGE专栏:EGE专栏

上一篇:EGE基础入门篇(五):窗口简单操作

下一篇: