Skip to main content

One post tagged with "EasyX"

View All Tags

· 9 min read
Chengzihan

EasyX用户图形界面的构建

详情访问https://docs.easyx.cn/zh-cn/drawing-func

1.菜单构建

以首页为例

    //绘制首页
void display_head(Btree &T,linklist& L) {
// 初始化绘图窗口 大小:宽和高
initgraph(1000, 700);

//设置背景图片
IMAGE background;//定义一个图片名.
loadimage(&background, "图片1.png", 1000, 700, 1);//从图片文件获取图像
putimage(0, 0, &background);//绘制图像到屏幕,图片左上角坐标为(0,0)

MOUSEMSG m; //要用到鼠标时,需要定义鼠标操作
//功能1 查找
setfillcolor(RED);//设置几何图形颜色
solidroundrect(0, 200, 200, 150, 0, 0);
//无边框的圆角矩形 参数:左 下 右 上(坐标) 圆角宽度 圆角宽度
//不过建议看官方文档换一个几何图形 比如无圆角的矩形

//设置以下字体的样式 30:大小 第二个数字不用管
settextstyle(30, 0, "华文中宋");
//字体背景透明,字体颜色默认白色
setbkmode(TRANSPARENT);
//在界面上绘制字体 20:距离左边界距离 160:距离右边界距离
outtextxy(20, 160, "股票查询");

//功能2 分析
setfillcolor(RED);
solidroundrect(0, 280, 200, 230, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
outtextxy(20, 240, "股票分析");
AddStyle(200, 280, 210, 230);

//功能3 退出
setfillcolor(RED);
solidroundrect(0, 360, 200, 310, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
outtextxy(20, 320, "退出程序");
AddStyle(200, 360, 210, 310);

while (1) {
//判断鼠标操作
m = GetMouseMsg();
if (m.x >= 0 && m.x <= 300 && m.y >= 130 && m.y <= 210) {
//这个是响应区域,例如查找功能的实现区域在solidroundrect(0, 280, 200, 230, 0, 0);也就是x为0——200,y为230-280范围
//鼠标在这一范围内单击时,则执行下面的操作
//查找
if (m.uMsg == WM_LBUTTONDOWN) {
//如果按下鼠标左键实现相应功能.
closegraph();//关闭此图形界面,注意:有打开就要有关闭
display_find(T,L);
break;
}
}
else if (m.x >= 0 && m.x <= 300 && m.y >= 210 && m.y <= 290) {
//分析
if (m.uMsg == WM_LBUTTONDOWN) { //如果按下鼠标左键实现相应功能.
closegraph();
display_analyse(T,L);
break;
}
}
else if (m.x >= 0 && m.x <= 300 && m.y >= 210 && m.y <= 370) {
//退出
if (m.uMsg == WM_LBUTTONDOWN) { //如果按下鼠标左键实现相应功能.
closegraph();
Exit_0();
break;
}
}
else {
//可以不写
//setlinecolor(WHITE);
//rectangle(90, 95, 310, 160);
}
}
}

2.数据的输入和显示

以查找的3.4算法为例

void readtolist(Btree &T,linklist L) {
MOUSEMSG m;
initgraph(1000, 700);
IMAGE background;//定义一个图片名.
loadimage(&background, "图片3.png", 1000, 700, 1);//从图片文件获取图像
putimage(0, 0, &background);//绘制图像到屏幕,图片左上角坐标为(0,0)

/*一些算法,与界面无关,省略...*/

//输入框的调用,注意,输入框只能输入char类型的,必须先获取char类型再转为需要的类型
char C[100] = {};
InputBox(C, 100, "请输入您想查询的日期:");
day = C;

//定义一个滚动值,初始为0
int scrolly = 0;

up:
//翻页时从这里重新执行,先看下面
int isfind = 0;//判断是否找到
for (int b = 0; b < sumday; b++) {
if (p[b]->date == day) {
isfind = 1;
plist op = new PNode;
op = p[b]->next;

//常规操作,设置背景图片,可以有也可以没有,没有的话默认上面的
initgraph(1000, 700);
IMAGE background;//定义一个图片名.
loadimage(&background, "图片3.png", 1000, 700, 1);//从图片文件获取图像
putimage(0, 0, &background);//绘制图像到屏幕,图片左上角坐标为(0,0)

//设置模块颜色为紫色
setfillcolor(MAGENTA);
solidroundrect(0, 0, 800, 160, 0, 0);
//无边框的圆角矩形

settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(WHITE);

//注:输出也必须是char【】类型,需要转化
char* C = new char[1024];
strcpy(C, day.c_str());//string转化为char【】
outtextxy(20, 90, C);

setfillcolor(WHITE);
solidroundrect(0, 20, 200, 80, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(MAGENTA);
outtextxy(20, 34, "返回");
setcolor(WHITE);

setfillcolor(WHITE);
solidroundrect(1200, 300, 900, 350, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(MAGENTA);
outtextxy(930, 310, "上翻");
setcolor(WHITE);

//这些地方可以简写,我都是复制的,所以懒得删了
setfillcolor(WHITE);
solidroundrect(1200, 370, 900, 420, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(MAGENTA);
outtextxy(930, 380, "下翻");
setcolor(WHITE);


settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(25, 140, "股票代码");

setbkmode(TRANSPARENT);
outtextxy(179, 140, "股票名称");

setbkmode(TRANSPARENT);
outtextxy(287, 140, "开盘价");

setbkmode(TRANSPARENT);
outtextxy(387, 140, "收盘价");

setbkmode(TRANSPARENT);
outtextxy(491, 140, "涨跌幅");

//设置初始高度值,数据列初始高度,随上翻、下翻而变化
int het = 160+ scrolly;

while (op) {
//股票代码
strcpy(C, op->code.c_str());
outtextxy(25, het, C);
//这里的上边距是het,是可变的值,便于翻页

//股票名称
strcpy(C, op->nick.c_str());
outtextxy(179,het,C);

//开盘价
strcpy(C, op->str_openprice.c_str());
outtextxy(287, het, C);

//收盘价
strcpy(C, op->str_closeprice.c_str());
outtextxy(387, het, C);

//涨跌幅
strcpy(C, op->str_updrate.c_str());
outtextxy(491, het, C);


het += 20;
//每条股票之间间距为20
op = op->next;
}

//上面的固定UI必须重复一遍,因为翻页之后会遮住原来的UI,所以必须重绘
setfillcolor(MAGENTA);
solidroundrect(0, 0, 800, 160, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(WHITE);
strcpy(C, day.c_str());
outtextxy(20, 90, C);
setfillcolor(WHITE);
solidroundrect(0, 20, 200, 80, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(MAGENTA);
outtextxy(20, 34, "返回");
setcolor(WHITE);
settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(25, 140, "股票代码");

//settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(179, 140, "股票名称");

//settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(287, 140, "开盘价");

//settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(387, 140, "收盘价");

//settextstyle(20, 0, "楷体");
setbkmode(TRANSPARENT);
outtextxy(491, 140, "涨跌幅");
//判断鼠标操作
while (1) {
m = GetMouseMsg();
if (m.x >= 0 && m.x <= 200 && m.y >= 20 && m.y <= 90) {
//返回 solidroundrect(0, 20, 200, 80, 0, 0);
if (m.uMsg == WM_LBUTTONDOWN) { //如果按下鼠标左键实现相应功能.
display_find(T, L);
break;
}
}
else if (m.x >= 890 && m.x <= 1300 && m.y >= 290 && m.y <= 350) {
//上翻指令捕获 solidroundrect(1200, 300, 900, 350, 0, 0);
//左上右下
if (m.uMsg == WM_LBUTTONDOWN && scrolly < 0) { //如果按下鼠标左键实现相应功能.
scrolly = scrolly + 500;
//上翻,每条股票的位置均下移500,注意scrolly有个封顶值,不然会一直翻页空白页面
goto up;//修改scrolly相当于修改了上面的het,回到原处继续执行
break;
}
}
else if (m.x >= 890 && m.x <= 1300 && m.y >= 360 && m.y <= 430) {
//下翻捕获指令 solidroundrect(1200, 370, 900, 420, 0, 0);;
//左上右下
if (m.uMsg == WM_LBUTTONDOWN && scrolly > -4300) { //如果按下鼠标左键实现相应功能.
scrolly = scrolly - 500;
goto up;
break;
}
}
}

break;
}
}


if (isfind == 0) {
//未找到显示UI
setfillcolor(MAGENTA);
solidroundrect(0, 280, 800, 150, 0, 0);
//无边框的圆角矩形 参数:左 上 右 下(坐标) 圆角宽度 圆角宽度
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(WHITE);
outtextxy(20, 160, "未找到结果");
AddStyle(800, 200, 210, 150);
setfillcolor(WHITE);
solidroundrect(0, 20, 200, 80, 0, 0);
settextstyle(30, 0, "华文中宋");
setbkmode(TRANSPARENT);
setcolor(MAGENTA);
outtextxy(20, 34, "返回");
setcolor(WHITE);
while (1) {
m = GetMouseMsg();
if (m.x >= 0 && m.x <= 200 && m.y >= 20 && m.y <= 80) {
//返回
if (m.uMsg == WM_LBUTTONDOWN) { //如果按下鼠标左键实现相应功能.
display_find(T, L);
break;
}
}
}
}
getchar();
closegraph();//关闭图形界面
}

实现效果

1 2

tip

2021,12,24,Data Struct
仓库地址https://github.com/inannan423/Data_struct_EasyX