C++使用Easyx封装一个登录介面

---

一、前期准备条件 需使用的工具

easyx图形库、VS 20xx系列编辑器（博主使用的是VS2019）
easyx的下载和一些简单的使用：https://blog.csdn.net/weixin_64603510/article/details/124199532

---

二、封装登录界面编辑框所使用的知识

1、普通类和组合类的使用
2、鼠标消息事件
3、封装一些公共接口，设置或修改类中的一些参数
4、多文档编程
5、图形库easyx的简单使用

设计封装登陆界面的想法思路

一、首先要明白一个的登录界面有哪些东西

1、文字标签
2、矩形框
3、按钮—实质也是矩形框
按钮的封装可以参考这个博客：https://blog.csdn.net/weixin_64603510/article/details/126257479

二、设计思路

1、首先要明白什么是多文档编程？
定义：简单点来说，就是将一个源代码文件按功能拆分成多个文件(.h和.cpp文件)，以便方便他人同时进行编写程序，大大提高了效率。多文档编程严格地将声名与定义拆分开来，一般声名写在.h文件中,定义写在.cpp文件中。

作用：就是为了方便多人协同，同时编写这个程序中的不同模块，从而大大减少
了编写这个程序所需要的时间。

2、详细步骤：
定义矩形类Rect、光标类Cursor 、以及组合类(文字编辑类)Edit
3、编写各个类中需实现的一些功能，将声名与定义拆分写
4、在main中将这些组合起来。

三、详细代码

详细代码如下：
公共头文件库----common.h

#pragma once
#include <graphics.h>
#include <iostream>
#include <string>
#include <ctime>
using namespace std;
#define EDIT_W 200
#define EDIT_H 25

矩形类-----rect.h

#pragma once
#include "common.h"
class Rect
{
public:
	Rect(int x = 0, int y = 0, int w = EDIT_W, int h = EDIT_H, COLORREF = RGB(238, 238, 238));
	int GetX();
	int GetY();
	int GetW();
	int GetH();
	int GetColor();
	void SetColor(COLORREF color);
	void SetX(int x);
	void SetY(int y);
	void SetW(int w);
	void SetH(int h);
	void RestoreColor();		//还原颜色
	void Show();
	bool InRect(ExMessage msg);
private:
	int x;
	int y;
	int w;
	int h;
	
	COLORREF curColor;
	COLORREF oldColor;
};

矩形框中的光标类-----cursor.h

#pragma once
#include "rect.h"
#include "timer.h"
class Cursor 
{
public:
	Cursor(int x, int y, int w, int h, COLORREF color);
	void Show();
	void SetCurSor(int x, int y);
private:
	void Draw();
	void Clear();
private:

	Rect cursor;
	Timer timer;
	int count;			//控制绘制
};

光标中使用到的时间类—timer.h

#pragma once
#include "common.h"
class Timer 
{
public:
	Timer(int duration, int id);
	bool OnTimer();
private:
	int id;
	int duration;
};

组合类(编辑类)------edit.h

#pragma once
#include "common.h"
#include "rect.h"
#include "cursor.h"
//HWND hwnd ;
class Edit 
{
public:
	Edit(int x, int y, int w, int h, COLORREF color);
	/*Edit(int x, int y, int w, int h, string text);*/
	void Show();
	void ClickEvent(ExMessage msg);
	bool InEdit(ExMessage msg);
	void OnEvent(ExMessage msg);
	wstring GetText();
	
private:
	Rect rect;
	Cursor cursor;
	wstring text;		//存储
	int textw;			//文字宽度
	bool inputState;	//是否输入
};

cursor中的定义 -----cursor.cpp

#include "cursor.h"
Cursor::Cursor(int x, int y, int w, int h, COLORREF color):cursor(x,y,w,h,color), timer(20,0)
{
	count = 0;
}

void Cursor::Show()
{
	if (timer.OnTimer()) 
	{
		count++;			//用计数来控制绘制还是擦除
	}
	Draw();
	Clear();
}

void Cursor::Draw()
{
	if (count % 60 < 30) 
	{
		setfillcolor(BLACK);
		rectangle(cursor.GetX(), cursor.GetY(),
			cursor.GetX() + cursor.GetW(), cursor.GetY() + cursor.GetH());
	}
}

void Cursor::Clear()
{
	if (count % 60 > 30)
	{
		//setfillcolor(WHITE);
		clearrectangle(cursor.GetX(), cursor.GetY(),
			cursor.GetX() + cursor.GetW(), cursor.GetY() + cursor.GetH());
	}
}

void Cursor::SetCurSor(int x, int y)
{
	cursor.SetX(x);
	cursor.SetY(y);
}

----edit.cpp

#include "edit.h"
extern HWND hwnd;

Edit::Edit(int x, int y, int w, int h, COLORREF color):rect(x,y,w,h,color),cursor(x,y,1,h-4,color)
{
    this->inputState = false;
    this->textw = 0;
}


void Edit::Show()
{
    rect.Show();        //矩形
    //处理文字
    setbkmode(TRANSPARENT);
    settextcolor(BLACK);
    textw = textwidth(text.c_str());
    outtextxy(rect.GetX() + 10, rect.GetY() + 5, text.c_str());
    settextstyle(20, 0, L"楷体");
    outtextxy(135, 100, L"账号：");
    outtextxy(135, 200, L"密码：");
    outtextxy(340, 277, L"登录");
    outtextxy(220, 277, L"退出");
    //光标
    if (inputState == true) 
    {
        cursor.SetCurSor(rect.GetX() + textw + 10, rect.GetY() + 2);
        cursor.Show();
    }
}

void Edit::ClickEvent(ExMessage msg)
{
    //判断鼠标是否在退出按钮中   且左键单击按钮
      if (msg.x >= 220 && msg.x < +220 + 40 && msg.y >= 275 &&
          msg.y <= 300&&msg.message==WM_LBUTTONDOWN) {

          MessageBox(hwnd, L"你确定要退出吗？", L"提示", MB_OKCANCEL);
      }
      //判断鼠标是否在登录按钮里面  且左键单击
      
}

bool Edit::InEdit(ExMessage msg)
{
    return rect.InRect(msg);
}

void Edit::OnEvent(ExMessage msg)
{
    switch (msg.message) 
    {
    case WM_LBUTTONDOWN:            //鼠标消息
        if (InEdit(msg)) 
        {
            rect.SetColor(WHITE);
            inputState = true;      //点击编辑框，编辑状态改为可编辑状态
        }
        else
        {
            rect.RestoreColor();    //还原颜色
            inputState = false;
        }
        break;
    case WM_CHAR:                   //按键输入的字符消息
        if (inputState == true)     //一定是可输入状态
        {
            switch (msg.ch) 
            {
            case '\b':              //删除
                if (!text.empty()) 
                {
                    text.pop_back();    //字符串尾部删除
                }
                break;
            case '\r':                  //确认输入
            case '\n':
                rect.RestoreColor();
                inputState = false;
                break;
            default:                    //其他字符
                text.push_back(msg.ch);
                break;
            }
        }
        break;
    }
}
wstring Edit::GetText()
{
    return text;
}

-------rect.cpp

#include "rect.h"
Rect::Rect(int x, int y, int w, int h, COLORREF color)
{
    this->x = x;
    this->y = y;
    this->w = w;
    this->h = h;
    this->curColor = color;
    this->oldColor = color;
}
int Rect::GetX()
{
    return x;
}

int Rect::GetY()
{
    return y;
}

int Rect::GetW()
{
    return w;
}

int Rect::GetH()
{
    return h;
}

int Rect::GetColor()
{
    return curColor;
}

void Rect::SetColor(COLORREF color)
{
    this->curColor = color;
}

void Rect::SetX(int x)
{
    this->x = x;
}

void Rect::SetY(int y)
{
    this->y = y;
}

void Rect::SetW(int w)
{
    this->w = w;
}

void Rect::SetH(int h)
{
    this->h = h;
}

void Rect::RestoreColor()
{
    this->curColor = oldColor;
}

void Rect::Show()
{
    setfillcolor(this->curColor);
    setlinecolor(BLACK);
    fillrectangle(x, y, x + w, y + h);

}

bool Rect::InRect(ExMessage msg)
{
    if (msg.x >= x && msg.x <= x + w && msg.y >= y && msg.y <= y + h) 
    {
        return true;
        判断鼠标是否在退出按钮中
        //if (msg.x >= 220 && msg.x < +220 + 40 && msg.y >= 275 && msg.y <= 300) {
        //    Sleep(3000);
        //    exit(1);
        //    return false;
        //}
    }
    return false;
    //return (msg.x >= x && msg.x <= x + w && msg.y >= y && msg.y <= y + h) ;
}

-----timer.cpp

#include "timer.h"

Timer::Timer(int duration, int id)
{
    this->duration = duration;
    this->id = id;
}

bool Timer::OnTimer()
{
    static  int startTime = 0;
    int endTime = clock();
    if (endTime - startTime >= duration) 
    {
        startTime = endTime;
        return true;
    }
    return false;
}

-----main函数

#include "edit.h"
HWND hwnd;



int main() 
{
	const wstring USER_ACCOUNT  = L"你是最棒的";			//用户登录账号
	const wstring USER_PASSWORDS =L"123678";			//用户登录密码
	/*hwnd=initgraph(640, 480);*/
	hwnd = initgraph(640, 480);
	setbkcolor(RGB(238, 238, 238));
	cleardevice();
	settextcolor(BLACK);
	/*settextstyle(25, 0, L"楷体");*/
	Edit* pEdit1 = new Edit(200, 100,200,25, RGB(238, 238, 238));
	Edit* pEdit2 = new Edit(200, 200, 200, 25, RGB(238, 238, 238));
	Edit* pEdit3 = new Edit(340, 275, 40, 25, RGB(238, 238, 238));
	Edit* pEdit4 = new Edit(220, 275, 40, 25,RGB(238, 238, 238));
	ExMessage msg;
	Edit edit();
	BeginBatchDraw();
	while (true) 
	{
		
		while (peekmessage(&msg)) 
		{
			pEdit1->OnEvent(msg);
			pEdit2->OnEvent(msg);
			if (msg.x >= 340 && msg.x <= (340 + 40) && msg.y >= 275 &&
				msg.y <= 300&&msg.message==WM_LBUTTONDOWN) {
				//如果账号密码正确    pEdit1->GetText() ==wstring(USER_PASSWORDS)
				//pEdit1->GetText()== USER_ACCOUNT&&pEdit2->GetText()== USER_PASSWORDS
				//0==strcmp(wstring(pEdit1->GetText()), wstring(USER_ACCOUNT))
				//比较用户输入账号与密码知否正确
				if (pEdit1->GetText() == USER_ACCOUNT && pEdit2->GetText() == USER_PASSWORDS) {
					MessageBox(hwnd, L"欢迎vip玩家登录游戏", L"提示", MB_OKCANCEL);
				}
				else {
					MessageBox(hwnd, L"账号或密码错误", L"错误提示", MB_OKCANCEL);
				}
			}
			pEdit3->ClickEvent(msg);
			pEdit4->ClickEvent(msg);
		}
		
		pEdit1->Show();
		pEdit2->Show();
		pEdit3->Show();
		pEdit4->Show();
		FlushBatchDraw();
	}
	EndBatchDraw();
	closegraph();
	return 0;
}

总结

以上就是今天封装一个登录界面的全部过程。