Skip to main content

EasyX图形界面构建

· 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