Margoo

...?

使用 EasyX 实现 UI 原理教程(章三 基础 UI 程序的结构与基础按钮)

返回:本文目录

正文

在开始第三章的学习之前,我们先来理解几个概念:

1. 父与子

窗口

如上图所示,Form 1 窗口下有一 LineText 3 控件与 Button 2 控件,假设 LineText 3 与 Button 2 是 Form1 下一控件,那么我们便说 Form 1 是 LineText 3 与 Button 2 的“父亲”,相对的 LineText 3 与 Button 2 我们叫做“儿子”,专业点说 LineText 3 与 Button 2 是 Form 1 的子控件,Form 1 是 Button 2 与 LineText 3 的父窗口。

2. 事件(Event)

如果你有略微接触过 Win32 Api 的话,你肯定知道“事件”的概念,事件,简单来说就是用户的任意交互(例如:点击鼠标,移动鼠标,按下键盘),或者是一些提示消息,你可以把你的程序想象成人体的神经系统,你的函数 / 类就是神经元细胞,函数 / 类之间的通信就是基于事件(Event)。

在前两章中,我们已经学会了触发器以及绘图单元的相关知识,所以今天我们来正式进入 UI 的大门,首先我们要了解的是 UI 的基础结构。

我们需要了解 UI 是如何处理鼠标消息并且将它传递给控件的,不知道读者是否还记得我们第一章里边是如何实现触发器的 is_trigger 函数与 main 函数的,忘记了也没关系我把代码放在下面。

// rectangle_trigger 的 is_trigger 函数
bool is_trigger(ExMessage message)
{
	// 判断鼠标是否在矩形范围内
	return (message.x >= x && message.x <= x + width &&
		 	message.y >= y && message.y <= y + height);
}
int main()
{
	initgraph(640, 480, SHOWCONSOLE);

	setfillcolor(WHITE);

	// 绘制矩形和圆
	fillrectangle(40, 40, 90, 90);
	solidellipse(120, 40, 160, 80);

	// 测试触发器
	rectangle_trigger  rect_trigger(40, 40, 50, 50);
	geometry_trigger   geom_trigger(shape_geometry::CIRCLE, {120 - 20, 40 - 20, 40, 40, 20});

	ExMessage message;

	while (true)
	{
		getmessage(&message);

		if (message.message == WM_LBUTTONDOWN)
		{
			if (rect_trigger.is_trigger(message) == true)
			{
				printf("■");
			}
			if (geom_trigger.is_trigger(message) == true)
			{
				printf("●");
			}
		}
	}

	_getch();

	return 0;
}

当时在第一章我并没有解释为什么传参要是 ExMessage 与为什么要这样子用 getmessage 去写 main,其实这就是我们今天的内容:UI 的结构。

其实对于鼠标事件的获取,应该是使用 getmessage 一直去等消息,如果 main 获得了消息,后消息类型的判断然后传递给控件,整个流程从原理上来讲是可以用单线程来实现的。

接下来我们以实现一个基础控件:按钮,为例子来实现一个基础的 UI ,这里我分成几部分供读者阅读。

★一切的基石 - Object

一般来说,因为 UI 库里的各种控件,大多数时候他们都是殊途同归的,所以为了方便我们在继承派升上下文章,我们需要所有类(无论控件还是判断器还是绘图单元)都要继承一个基础的类:base_object,base_object 要求需要拥有几个虚函数 mouse_pressed_event(),mouse_move_event(),mouse_released_event()负责用户或默认触发方法,且需要一个 process_event 处理 main 传入的 ExMessage,除此之外还需要一些属性如父子关系等,这里我给大家绘制了一个结构体供大家参考。

base_object的结构示意图

有了上面这一个大概的梳理,我们能很轻易地将 base_object 写出来,并且将它封装于 object.h 中。

注意:base_object 应继承于 geometry_trigger ,所以图中的 x, y,height,width 不用在代码中重复定义。

////////////////////////////////////
//      	  object.h
// <创 建 时 间> : 2021/11/13
// <最后修改时间> : 2021/11/13
// <作      者>  : Margoo
// <邮      箱>  : 1683691371@qq.com
// 
#pragma once

#include "trigger.h"

#include <vector>

// 一切基石 base_object
class base_object :
	public geometry_trigger
{
private:
	// 焦点是否曾经在控件上
	bool used_to_on = false;

	// 父对象
	base_object*			  parent = nullptr;
	// 子对象
	std::vector<base_object*> child_objects;

public:
	base_object(base_object* init_parent = nullptr)
		: parent(init_parent)
	{

	}

public:
	// 处理事件消息 (一般来说没有必要修改)
	virtual void event_process(ExMessage message)
	{
		if (is_trigger(message) == true)
		{
			switch (message.message)
			{
			case WM_LBUTTONDOWN:
			{
				used_to_on = true;

				mouse_pressed_event();
			}
			
			default:
			{
				mouse_move_event();
			}
			}
		}
		else
		{
			if (used_to_on == true)
			{
				mouse_released_event();
			}
		}
	}

	// 用户自定消息处理函数
	virtual void mouse_pressed_event()
	{

	}
	virtual void mouse_released_event()
	{

	}
	virtual void mouse_move_event()
	{

	}
};

利用先前已经写好了的触发器,我们非常快速地就完成了 base_object ,接下来进入下一小节的内容

★一些细节上的调整

如果我们直接开始写按钮的话,现在我们的代码还是无法正常运行,我们需要做如下几个调整:

1. 在 <cell.h> 中将 image_cell 改为继承自 base_object

#include "object.h"

class image_cell :
	public base_object
{
// ...
}

为什么?因为到时候我们写按钮控件的时候将需要继承自 image_cell 并重写 draw 函数。

2. 在 <trigger.h> 中,最上方加入如下的代码:

// Anti easyx _WINVER def
#ifndef WINVER
#	define WINVER 0x0500
#endif

这句代码是什么意思呢?主要的意思是设置当前程序的最低兼容版本,为什么要这么干呢?主要原因是因为 EasyX 为了兼容老旧系统会将 WINVER 定义为 0x0400 而这样的结果会导致部分将来要用到的功能无法正常使用。

★正式开始写 pushbutton 控件

 万事俱备,经过前面缕清过逻辑以及写完了 trigger 还有绘图单元相关代码,相信对于你来说写一个 pushbutton 已经不是一艰难事了,这里我也不多言,直接贴我的代码:

#pragma once

#include "object.h"
#include "cell.h"

#include <functional>

// 自动创建矩形的掩码图
IMAGE* get_fillrectangle_mask(int width, int height)
{
	IMAGE* result = new IMAGE(width, height);

	SetWorkingImage(result);

	setfillcolor(BLACK);

	fillrectangle(0, 0, width, height);

	SetWorkingImage();

	return result;
}

class pushbutton :
	public image_cell
{
public:
	std::function<void()> mouse_on_clicked;

public:
	void draw()
	{
		mask = get_fillrectangle_mask(width, height);

		setfillcolor(WHITE);

		fillrectangle(x, y, width + x, height + y);
	}

public:
	pushbutton(base_object* init_parent = nullptr)
	{
		parent = init_parent;
	}

public:
	void mouse_pressed_event()
	{
		mouse_on_clicked();
	}

	void mouse_move_event()
	{
		// 设置鼠标样式 有代入感
		SetClassLongPtr(GetHWnd(), GCLP_HCURSOR, reinterpret_cast<LONG_PTR>(IDC_HAND));
	}

	void mouse_released_event()
	{
		// 设置鼠标样式 有代入感
		SetClassLongPtr(GetHWnd(), GCLP_HCURSOR, reinterpret_cast<LONG_PTR>(IDC_ARROW));
	}
};

既然一切都已经到位了,不妨来写一段测试代码来测试我们的 pushbutton

#include <conio.h>

#include "button.h"

void mouse_on_clicked()
{
	MessageBox(GetHWnd(), L"Hello World", L"Hello World", MB_OK);
}

int main()
{
	initgraph(640, 480);

	pushbutton button;

	button.mask = get_fillrectangle_mask(40, 40);

	button.x = 80;
	button.y = 80;
	button.width = 40;
	button.height = 40;

	button.mouse_on_clicked = mouse_on_clicked;

	ExMessage message;

	while (true)
	{
		getmessage(&message);

		button.draw();
		button.event_process(message);
	}

	_getch();

	return 0;
}

可以看到,程序正常运行且结果正常

效果图

至此本章完结,其实读者到此如果已经全部明白,已经可以开始自己尝试实现一个功能简陋的 UI 了~ 是不是跃跃欲试了呢?这边给大家留个作业:写出一个能够现实文字,自定义背景样式的按钮。如果你对本章内容了解透彻,这绝对将不会花费你超过 20 分钟的时间。

接下来我们将会一步一步地去实现一个类似祝融的 EasyUI 库, 现在的读者们已经算是初步入门了 UI,但本系列的教程才只是个开端。

分享到

添加评论