EGE基础:基础绘图篇

EGE专栏:EGE专栏

一、坐标系与图形参数

1. 绘图区的坐标系

  在调用 initgraph() 函数对图形环境进行初始化后,EGE会为我们创建出一个可用于绘图的窗口。如下图所示,白色区域是可供我们绘图的绘图区域,接下来我们就可以借助EGE的函数在这个区域上绘制出我们想要的图形。

在这里插入图片描述

  绘制图形需要描述一个图形的位置和大小,所以在正式开始绘图前,我们需要先了解在窗口绘图区域中如何表示位置。

  之前在调用 initgraph() 函数进行初始化时,我们会传入 widthheight 参数,这样EGE就会为我们创建一个绘图区域大小为 w i d t h × h e i g h t \mathrm{width \times height} width×height 的窗口。

  下图即为在窗口绘图区域上建立的坐标系,以区域左上角为原点, x x x 轴向右为正, y y y 轴向下为正。

在这里插入图片描述
  在创建出的窗口中,绘图区域内将包含着 height 行、width 列的像素点,每一个像素点都用一个二维整数坐标 ( x , y ) (x, y) (x,y) 来进行表示。左上角的像素点坐标为 ( 0 , 0 ) (0, 0) (0,0),右下角的像素点坐标为 ( w i d t h − 1 , h e i g h t − 1 ) (\mathrm{width-1, height -1}) (width1,height1)

在这里插入图片描述

2. 图形与颜色

2.1 图形的三种颜色

  在绘制图形前,需要指定一下图形的颜色,否则图形就会以设定的初始颜色绘制出来。
  在EGE中,图形分为三种颜色,分别是 背景颜色(background color)、填充颜色(fill color) 和 线条颜色(line color)。

  如下图所示,图中指出了三种颜色类别分别在图形中对应哪些部分:

颜色类别对应内容颜色设置函数
背景颜色窗口或区域的底色setbkcolor(), setbkcolor_f()
填充颜色封闭图形内部的颜色setfillcolor()
线条颜色直线、曲线、边框等由线条构成的图形的颜色setcolor()

在这里插入图片描述

  在调用相关函数设置好颜色后,这些颜色设置会一直生效,直到修改为止,所以后面绘制出的图形都会以当前的颜色设置绘制出来。
  因此,如果后面绘制的图形都使用同一种颜色,那么就没必要调用函数来修改颜色设置。

2.2 线框图形与填充图形

  只由线条组成的图形一般称为 线框图形,封闭的线框图形内部是空心的,没有填充,只受 setcolor() 所设置的线条颜色影响。

  而中间有颜色填充的封闭图形我们称为 填充图形,填充图形又分为 带边框不带边框 两种。

  • 不带边框的填充图形只受 setfillcolor() 所设置的填充颜色影响。
  • 带边框的填充图形相当于即包含线框又包含填充,因此边框部分受 setcolor() 所设置的线条颜色影响,而填充部分受 setfillcolor() 所设置的填充颜色影响。

  至于绘图函数绘制出的填充图形是否带边框,可以通过EGE官网的 库函数文档 进行查看。

在这里插入图片描述


2.3 设置背景颜色

  背景颜色并不是某个图形的属性,而是整个窗口、图像或视口(窗口的某个矩形区域)的属性。
  在绘制之前,通常需要先将整个窗口的内容都设置成某一个颜色,然后再在里面绘制其它图形,这样设置的颜色就成为了窗口中所有图形的背景颜色。

  EGE中窗口的背景颜色是通过调用 setbkcolor()_f 来进行设置。但这仅仅是设置窗口的一个属性值,此时并没有生效,窗口还是会保持原来的内容,之后需要在调用 cleardevice() 这个函数来将整个窗口的像素都改变成这个颜色值。
  除了 setbkcolor_f() 之外,还有个更为常用的 setbkcolor() ,它能在设置的同时,把窗口中颜色等于原背景颜色的像素用新的背景颜色替换掉。

void setbkcolor(color_t color, PIMAGE pimg = NULL);
void setbkcolor_f(color_t color, PIMAGE pimg = NULL);

在这里插入图片描述

  cleardevice() 函数的作用就是将窗口(图像)的每个像素都用背景颜色填充。后面需要重绘时,如果背景颜色没有改变的话,只需要再次调用 cleardevice() 即可,不需要重新设置背景颜色。

// EGE 设置背景颜色示例
#include <graphics.h>

int main()
{
	initgraph(640, 360, INIT_RENDERMANUAL);		//初始化图形界面
	ege_enable_aa(true);						//图形绘制启用抗锯齿

	//设置窗口背景颜色为 RGB(59, 59, 59)
	setbkcolor_f(EGERGB(59, 59, 59));		
	cleardevice();								//清屏

	//绘制一个填充椭圆
	setfillcolor(EGEARGB(255, 0, 180, 240));
	ege_fillellipse(320 - 220, 180 - 90, 440, 180);

	getch();				//暂停

	cleardevice();			//再次清屏

	getch();				//暂停

	closegraph();			//关闭图形界面

	return 0;
}

在这里插入图片描述


2.4 设置线条颜色以及填充颜色

  直线、曲线、线框图形以及填充图形的边框颜色都属于线条颜色,可通过 setcolor() 来进行设置。(另外,setcolor() 也用于设置文字颜色。)
  填充图形内部的填充颜色则由 setfillcolor() 设置。

  填充颜色的初始值是黑色RGB(0, 0, 0),因此如果没有设置过填充颜色,那么绘制出的填充图形是黑色的。

在这里插入图片描述

  线框图形的颜色以及带边框的填充图形的边框颜色都是通过 setcolor() 来进行设置。

函数声明:

//设置线条颜色以及文字颜色
void setcolor(color_t color, PIMAGE pimg = NULL);

//设置填充颜色
void setfillcolor(color_t color, PIMAGE pimg = NULL);

绘制示例
  这里绘制了一个填充圆以及另一个不同颜色的圆线框,展示了如果通过设置线条颜色和填充颜色来绘制不同颜色的图形。

// EGE 设置线条颜色和填充颜色示例
#include <graphics.h>

int main()
{
	initgraph(640, 360, INIT_RENDERMANUAL);		//初始化图形界面
	ege_enable_aa(true);						//图形绘制启用抗锯齿
	
	//设置窗口背景颜色为 RGB(59, 59, 59)
	setbkcolor(EGERGB(59, 59, 59));
	
	//绘制一个填充圆
	setfillcolor(EGEARGB(255, 0, 180, 240));
	ege_fillellipse(160 - 90, 140 - 90, 180, 180);
	
	//绘制一个圆形线框
	setcolor(EGEARGB(255, 236, 105, 1));
	ege_ellipse(480 - 90, 140 - 90, 180, 180);
	
	//绘制一条直线
	setcolor(EGEARGB(255, 255, 255, 255));
	ege_line(60, 300, 580, 300);
	
	getch();
	
	closegraph();
	
	return 0;
}

在这里插入图片描述

二、相关绘图概念

1. 图像、窗口与绘图目标

  我们绘图时经常省略PIMAGE参数,此时默认是绘制到窗口上,也可以设置为默认绘制到其它 IMAGE 图像上。

1. 设置当前绘图目标

void settarget(PIMAGE pbuf = NULL);

pbuf:绘图对象,为PIMAGE类型,你要绘画到的PIMAGE,如果不填,则默认为窗口。

2. 获取当前绘图对象

PIMAGE gettarget();

2. 普通绘图函数与高级绘图函数

. 绘图位操作模式

  绘图默认使用当前颜色来进行绘制,但是可以设置使用其它颜色,比如黑色,白色,窗口颜色和当前颜色的混合。

void setwritemode(int mode, PIMAGE pimg = NULL);

这个mode是需要固定的值传入(二元光栅操作码),具体请查看库函数文档,也可以看EGE光栅操作一章
在这里插入图片描述

三、图形的绘制

EGE部分绘图函数
http://xege.org/manual/api/draw/index.htm

  很多函数都有PIMAGE 参数, 这个是指向IMAGE对象的指针,默认值为NULL,即默认直接绘制到窗口

3. 线条的绘制

3.1 设置当前绘画线型

可以设置实线,虚线,点线等,还可以设置线宽

void setlinestyle(int linestyle, WORD upattern = NULL, int thickness = 1, PIMAGE pimg = NULL);

参数说明:setlinestyle( 线型, 自定义线性, 线宽, 绘制的目标)

  • linestyle, 线型
    linestyle只能从多个枚举中选择
enum line_styles {							线型注释
	SOLID_LINE      = PS_SOLID,				实线 = 0
	CENTER_LINE     = PS_DASH,				虚线 = 1
	DOTTED_LINE     = PS_DOT,				点线 = 2
	DASHED_LINE     = PS_DASHDOT,			点虚线 = 3
	NULL_LINE       = PS_NULL,				不可见 = 5
	USERBIT_LINE    = PS_USERSTYLE,			用户自定义 = 7
};
  • upattern, 自定义线型, 16位
    linestyleUSERBIT_LINE时,这个参数生效,从低位到高位一次代表从开始到末尾方向的每16个像素是否填充, 1代表填充 ,0代表不填充。

  • thickness, 线宽

3.2 设置当前绘画线宽

thickness 是浮点型,线的宽度, 单位是像素,可以很大

void setlinewidth(float thickness, PIMAGE pimg = NULL);

1. 普通绘图函数

1.1 普通绘图函数带有锯齿

  画出的图形可以看到线条会有锯齿,不是很美观,所以如果想要美观,可以使用 高级绘图函数

1.2 普通绘图函数使用的是RGB颜色

  接下来说的是普通绘图函数,和后面的高级绘图函数区别开来。

  普通绘图函数使用RGB颜色,ARGB颜色中的透明度对于普通绘图来说是无效的(高级绘图函数则可以使用透明度)。设置ARGB颜色无法调整图形的透明度,对于透明度不为0的ARGB颜色,普通绘图函数绘制出的图形有可能会变成黑色(只有一些特殊的Alpha值会),如果出现这种情况,设置一下透明度为0即可。

  图形的颜色是由前景色和填充颜色指定, setcolor() 设置前景色, setfillcolor() 设置填充颜色。设置颜色后,颜色就一直有效,直到下次设置。

2. 绘图函数目录

绘图函数请查看官网的库函数绘图函数文档,下面只挑几个说明一下

2.1 绘图预览

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 绘图函数文档

函数的使用请查阅库函数目录

http://xege.org/manual/api/draw/index.htm

在这里插入图片描述

2.3 补充:填充圆

有部分初学者不知道填充圆怎么画,所以做个补充

  就像正方形是长和宽相等的矩形一样,圆是长短半轴相等的椭圆,是椭圆的一个特例,所以使用填充椭圆绘图函数即可,长短半轴参数相等即可。

fillellipse(x, y, radius, radius);	//长短半径

  如果需要,可以封装成 fillcircle()

void fillcircle(int x, int y, int radius)
{
	fillellipse(x, y, radius, radius);
}

更多普通绘图函数请参考官网文档


3. 区域颜色填充

  如果已经绘制了线框或多个图形组成了封闭图形,可以自己手动给这些区域填充颜色。

填充先设置填充颜色

void setfillcolor(color_t color, PIMAGE pimg = NULL);

3.1 指定边界色填充(floodfill)

floodfill: 填充封闭图形内部,边界由borderColor指定,内部点为(x, y)。填充的颜色由 setfillcolor() 指定。

函数声明

void floodfill(int x, int y, int borderColor, PIMAGE pimg = NULL);

如下图所示,想要将下面的圆内部涂成浅蓝色

  1. 先要找到圆内部的一个点位置(在内部就行,不能在边界处)
  2. 确定边界的颜色,下面圆的边界颜色是红色,然后调用即可。

  原理是从目标位置开始,把周围不是边界颜色的像素都改成填充颜色,直至扩充到每一个点上下左右都是边界,所以边界颜色一定要能够封闭(八连通),不然会填充到外部。
在这里插入图片描述
在这里插入图片描述

  下面就是边界颜色不封闭的结果

在这里插入图片描述

3.2 指定区域色填充(floodfillsurface)

floodfillsurface: 将areacolor颜色的色块填充,x, y为色块内的某个点 。

函数声明

void floodfillsurface(int x, int y, int areacolor, PIMAGE pimg = NULL);

  如下图,想要将黄色色块涂成紫色, 先要找到色块内部的一个点(x, y), 然后确定色块的颜色值areacolor, 然后调用函数就可以了。
  原理是从目标位置开始,把周围颜色是areacolor的像素都改成填充颜色。这个和windows画图工具里油漆桶的作用是一样的。

在这里插入图片描述

填充前:
在这里插入图片描述
填充后:
在这里插入图片描述


EGE专栏:EGE专栏

  • 21
    点赞
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

依稀_yixy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值