本文章介绍C++用EasyX进行C++基础图形编程介绍。
EasyX安装:
1、点击上方超链接,进入官网,点击右侧下载EasyX
2、点击下载后的可执行文件:
3、EasyX安装非常简单,进入可执行文件,直接next,然后会自动检测你的开发工具,针对对应的开发工具直接点击安装即可。(文档最好也下载,有时候会遇见一些小疑问,可以查看):
4、安装成功:
安装成功后,我们就可以开始进行编程了(本人使用的是Visual Studio 2019)。
插件安装后,我们不需要做任何工作,打开或新建一个项目都可以,编写的过程只需要像平时引入头文件一样就可以进行图形编程。
1、打开/新建一个项目后,引入头文件easyx.h并建立一个图形窗口:
#include
int main(){
initgraph(1266, 730);//用该函数建立窗口//----------------------------------
//initgraph(int width,int height)
while(1); //为了防止我们窗口建立后点击一下会退出的情况发生,我们用该语句阻塞一下
return 0;
}
运行结果:
是不是像控制台一样黑?我们绘制的图形就是在这里显示的。
2、图形窗口坐标基础知识:
话不多说,给个图自己体会
坐标轴拓展(坐标轴修改)【学习完文字输出和颜色表示再回来学习这一小部分】:
一般我们使用坐标轴的时候,并不习惯上图这样的表示的方式,我们一般是取Y轴向上为正,要实现这个效果,我们需要调用两个函数:setaspectratio(int , int)和setorigin(int x,int y)
setaspectratio(int , int):修改缩放比例,但是当我们的x或者y为-1的时候,会参数坐标轴翻转的效果。
setorigin(int x,int y):修改坐标原点。因为我们的坐标原点默认为左上角,我们可以修改为左下角或中央。
示例:输出五个坐标点
#include
class coordination {
char draw = '*';
public:
int x = 0;
int y = 0;
void disp() { outtextxy(x, y, this->draw); }
//构造函数
coordination() {};
coordination(int x, int y) {
this->x = x;
this->y = y;
}
//析构函数
~coordination() {};
};
int main() {
initgraph(600, 400);
setbkcolor(RED);
settextstyle(20, 0, "宋体");
cleardevice();
settextcolor(YELLOW);
coordination c1 = coordination(100,300);
coordination c2 = coordination(300,300);
coordination c3 = coordination(400,300);
coordination c4 = coordination(100,100);
coordination c5 = coordination(130,200);
c1.disp();
c2.disp();
c3.disp();
c4.disp();
c5.disp();
while (1);
return 0;
}
输出结果:
修改坐标原点到左下角:
#include
class coordination {
char draw = '*';
public:
int x = 0;
int y = 0;
void disp() { outtextxy(x, y, this->draw); }
//构造函数
coordination() {};
coordination(int x, int y) {
this->x = x;
this->y = y;
}
//析构函数
~coordination() {};
};
int main() {
initgraph(600, 400);
setaspectratio(1, -1);//Y 轴向上为正,设置后,我们还需要修改坐标原点--------------------
setorigin(0, 500);//修改坐标原点---------------------------------------------------
setbkcolor(RED);
settextstyle(20, 0, "宋体");
cleardevice();
settextcolor(YELLOW);
coordination c1 = coordination(100,300);
coordination c2 = coordination(300,300);
coordination c3 = coordination(400,300);
coordination c4 = coordination(100,100);
coordination c5 = coordination(130,200);
c1.disp();
c2.disp();
c3.disp();
c4.disp();
c5.disp();
while (1);
return 0;
}
输出结果:
修改坐标原点到中央:
#include
#include
class coordination {
char draw = '*';
public:
int x = 0;
int y = 0;
void disp() { outtextxy(x, y, this->draw); }
//构造函数
coordination() {};
coordination(int x, int y) {
this->x = x;
this->y = y;
}
//析构函数
~coordination() {};
};
int main() {
initgraph(600, 400);
setaspectratio(1, -1);//Y 轴向上为正,设置后,我们还需要修改坐标原点--------------------
setorigin(300, 200);//修改坐标原点-------------------------------------------------
setbkcolor(RED);
settextstyle(20, 0, "宋体");
cleardevice();
settextcolor(YELLOW);
coordination c1 = coordination(100,300);
coordination c2 = coordination(300,300);
coordination c3 = coordination(400,300);
coordination c4 = coordination(100,100);
coordination c5 = coordination(130,200);
c1.disp();
c2.disp();
c3.disp();
c4.disp();
c5.disp();
while (1);
return 0;
}
输出结果:
3、一个黑黑的窗口,看着就不舒服,下面我们不妨先输出几个字试一下:
initgraph(600, 400);//窗口太大,有点不方便,来个小窗
outtextxy(200, 200,L"开启我的图形编程之路!");//----------------------------------
//注意,在vs2019中,若想将你的字符串正确输出,请在字符串的前面加上一个‘L’
while (1);
return 0;
运行结果:
我们输出的时候是使用一个固定的字符串进行输出的,很多时候,我们可能想要用一个变量去输出,但是有小伙伴发现,我们建立了一个字符串变量,输出的时候会出现不兼容:
std::string s1="开启我的图形编程之路!";
outtextxy(200, 200, s1);
//正常情况下,你的代码在这里会出错,实际上这是字符集不兼容的原因。
该问题的解决方案,在EasyX文档里面提供的解决方案:
为了问题便于解决,我们直接考虑使用自适应字符集,然后直接模仿代码:
#include
int main() {
initgraph(600, 400);
TCHAR s[] = _T("Hello World!");//-----------------------
outtextxy(200, 200, s);//-------------------------------
while (1);
return 0;
}
运行结果:
4、我们的字符输出成功了,我们能不能修改输出的字符的格式和颜色呢?在解决这个问题之前,我们有一个问题没有回答,在EasyX中如何表示颜色?:
最简单直接的方式:直接用每种颜色对应的英文字母大写来表示:
GREEN | 绿色 |
---|---|
BLUE | 蓝色 |
YELLOW | 黄色 |
… | … |
但是有的时候,我们想要使用组合色(由红绿蓝三基色可以组合任意一种颜色):
RGB( int , int ,int );
//参数中的三个int分别代表红、绿、蓝三基色的色度,其范围均为0~255。
通过RGB(int, int, int)我们可以获取任何我们想要得到的颜色。
我们知道,一个图片在计算机中由一个个的像素点组成,每个像素点都有一个颜色,进而组成一幅图。在计算机中,一个像素点用4个字节(Byte)表示:
00000000 | 00000000 | 00000000 | 00000000 |
---|---|---|---|
A | R | G | B |
上面的ARGB代表黑色,其中:
A:透明通道;
R:三基色之红色;
G:三基色之绿色;
B:三基色之蓝色;
因为RGB分别由8位二进制数表示,因此在进行色度调整的时候,我们只能选择0~255。
当两个像素点在同一坐标时,会发生什么情况?
我们给出两种运算:
例如,黑色跟白色进行位与(我们只考虑三基色,不考虑透明度):
黑:000H
白:FFFH
结果:000H,位与结果为黑色。
黑色与白色进行位或:
黑:000H
白:FFFH
结果:FFFH,位与结果为白色。
利用以上的运算,我们可以让图片产生很多不同的效果,比如背景透明图的实现,模糊化,马赛克等。
5、言归正传,下面我们了解如何输出带颜色的字:
settextcolor(color);
//参数为你想要展示的颜色
显示为蓝色字体:
initgraph(600, 400);
settextcolor(BLUE);//将文字颜色调整为蓝色---------------------------
TCHAR s[] = _T("开启我的图形编程之路!");
outtextxy(200, 200, s);
while (1);
return 0;
输出结果:
组合色:
initgraph(600, 400);
settextcolor(RGB(150,20,150));//文字颜色组合色--------------------------
TCHAR s[] = _T("开启我的图形编程之路!");
outtextxy(200, 200, s);
while (1);
return 0;
输出结果:
6、字体格式的调整:
我们在使用文档编辑工具的时候,我们可以选择调整字体的字号、字体样式等,在C++中,我们使用settextstyle(int(字高),int(字宽),string(字体样式));来实现。(注意,字体样式使用字符串表示的时候,前面别忘了加’L’)
在这里简述一下什么是字高、字宽。实际上,我们编辑文本的时候,经常使用字体的字号调节,但是我们调节的时候只调节一个字号值,并不存在什么字高、字宽。实际上,我们调节的字号就是字高,而字宽的变化属于自适应变化,其跟随字高进行变化。在这里,将字宽值设置为0时,其代表自适应变化。
例如,将字号设置为50,字体为楷体:
initgraph(600, 400);
settextcolor(RGB(150, 20, 150));
settextstyle(50, 0, L"楷体");//字号设为50,字体为楷体---------------------
TCHAR s[] = _T("开启我的图形编程之路!");
outtextxy(50, 200, s);
while (1);
return 0;
输出结果:
7、图片的输出:
图片文件与之前我们学习文件io的操作要求完全一致,并且注意将你的图片放到正确的文件夹中。
学习之前,我们看一个普通数据的输入输出:
int a; //定义一个整型变量
scanf("%d",&a); //从控制台读取一个10进制的数据保存在a中
printf("%d",a); //将a输出在控制台。
图片的显示也与此类似:
IMAGE p; //定义一个IMAGE类型变量
loadimage(&p,"图片名"); //从文件中读取一张图片保存到p中
putimage(int x,int y,&p);//将p中的图像输出在界面上
例如:
我们选择一个宽1000,高625的图片:
建立对应窗口并载入输出图片:
initgraph(1000, 625);//---------------------------------
IMAGE m;
loadimage(&m, L"Pokemon.jpg");//注意后缀-----------------
putimage(0, 0, &m);//-----------------------------------
while (1);
return 0;
输出结果:
8、音乐播放:
在我们建立的窗口也能进行音乐播放(音乐播放器设计的基础)
(重点)实际上,EasyX库并没有提供播放音乐的对应接口,它是windows系统的东西,因此只有一个easyx头文件根本不够用>。我们可以按照以下步骤:
包含头文件mmsystem.h mm:Multi-Media多媒体
包含一个库文件 winmm.lib win:windows mm同上
库文件包含方式:
#pragma comment (lib,“winmm.lib”) //c-预处理语句
调用函数:mciSendString(string file_name) //这里的file_name同文件io(注意后缀)
我们在针对mciSendString(string file_name)进行用法介绍:
代码 | 解释 |
---|---|
mciSendString(“open 夜曲.mp3”,0,0,0); | 打开音乐文件 |
mciSendString(“play 夜曲.mp3”,0,0,0); | 播放音乐文件 |
mciSendString(“pause 夜曲.mp3”,0,0,0); | 暂停音乐播放 |
mciSendString(“close 夜曲.mp3”,0,0,0); | 关闭音乐文件 |
其中:
mic: modia control interface:媒体控制接口
send string: 发送字符串
后面的三个0暂时先不管,因为它涉及的东西比较多(比如声道),新手先不用管太多,我们简单模拟一下就行,后面有时间再深入。
注意:
1、网易云的音乐播放不了。(文件内部做了调整,windows系统内部无法识别)QQ音乐可以
2、音乐名称中间不能有空格,因为你的一些操作需要用空格来隔开(比如open和文件名中间留一个空格)
3、请提前把文件拓展名勾上,不要自己改后缀
例如:
#include
#include //-------------------------------------一定别忘了引入
#pragma comment (lib,"winmm.lib")//----------------------一定别忘了引入
int main() {
initgraph(1000, 625);
mciSendString(L"open 1.mp3", 0, 0, 0); //打开---------------------
mciSendString(L"play 1.mp3", 0, 0, 0); //播放---------------------
while (1);
return 0;
}
当窗口生成后,会自动播放音乐。
9、背景色修改:setbkcolor()+cleardevice();
setbkcolor:设置背景色
cleardevice:用当前背景色刷新窗口。
注意:仅仅使用setbkcolor()后,我们并不能直接改变窗口背景的颜色,必须后面来一次cleardevice来刷新一下。
示例:
initgraph(1000, 625);
setbkcolor(WHITE);//--------------------------------背景白色
cleardevice();//------------------------------------刷新背景色
settextcolor(RED);
settextstyle(30, 0, "宋体");
outtextxy(400, 260, "Hello World!");
while (1);
return 0;
输出结果:
为打好图形编程的基础,正所谓磨刀不误砍材工,我们先把EasyX文档上面涉及的基本操作多多运用,熟练掌握,等使用熟练了以后,再去掌握画图的进阶内容(比如动画、按钮、鼠标点击事件等,实际上,掌握了上面的基础内容结合文件IO,就做一些简单的数据可视化)。EasyX文档中涉及的基础知识,每有心得即可再该文档中进行补充。而进阶内容补充到另一个文档中。
2023年6月3日更:为了进一步方便初学者使用鼠标、键盘操作来制作属于自己的小游戏,本人将easyx中的鼠标、键盘操作进一步以独立线程的方式封装以方便大家使用。
具体请参考:
利用C++11结合easyx并发监听鼠标、键盘事件
(文章内容若有纰漏,欢迎指正)
参考博文:
C/C++图形库EasyX快速上手指南【1】——绘图窗口和基本图形文字绘制(该文章中对字符串输入部分的详细解释,内容很好,可参考)