使用 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 的话,你肯定知道“事件”的概念,事件,简单来说就是用户的任意交互(例如:点击鼠标,移动鼠标,按下键盘)

...

使用 EasyX 实现 UI 原理教程(章二 绘图单元)

返回:本文目录

布局在一个界面上的形形色色的控件我们都可以叫他为一个单元 ( cell )。

如上图所示,任意一个控件(不论它是否能与用户发生交互,图形规律与否)都是一个单元, 上一篇文章 我们已经学会了触发器以及相关实现,那么,我们将一个控件比作一个动物细胞,我们可以说触发器是细胞核,而绘图单元则是细胞膜,两者缺一不可,触发器负责处理用户点击,而绘图单元则负责展示画面。

接下来,我们将上一篇文章所写的触发器封装为 “trigger.h”(文件内容上一章已标注),然后再来开始今天的代码学习,由刚刚的介绍我们知道,绘图单元是负责将控件画出来的,所以不同的控件要拥有不同的绘图单元,那么我们首先创建一个根据图形贴图的绘图单元,因为绘图单元和触发器缺一不可,所以我们的绘图单元要派生于异形触发器 "geometry_trigger" 类。

接下来,我们来大概设计一下一个基础的贴图绘图单元:

这边解释

...

使用 EasyX 实现 UI 原理教程(章一 触发器)

返回:本文目录

触发器是判断鼠标是否浮动到控件上的判断器,分为两大类:

1. 异形触发器。

2. 矩形触发器。

先说矩形触发器吧。

如上图,这是一个使用 fillreactangle 函数画出来的矩形,这个时候让你想办法判断鼠标是否点击了该矩形,你一定会想到,用鼠标 x、y 坐标与矩形 x、y 坐标和长、宽来解决,确实这是一个方法,这里放一下伪代码:

// 伪代码
如果 (鼠标_x >= 矩形_x && 鼠标_x <= 矩形_x + 矩形长 &&
	  鼠标_y >= 矩形_y && 鼠标_y <= 矩形_y + 矩形宽)
{
	鼠标点击处理();
}

基于上面的逻辑,我们尝试在 C++ 中把他封装成类:

...

使用 EasyX 实现 UI 原理教程

前言

关于 EasyX 实现控件,已经有很多人给出过了大概实例甚至是一个完整的控件库,但是很少有人能接触到这部分底层UI原理。

本文主意在于让大家了解自绘 UI 控件的原理和大概实现过程,其余过多细节不做过多赘述,若有同学有兴趣写一个基于 EasyX 的控件库本文章或许会有帮助。

本文也会将在 EasyX 中写控件库项目的坑与细节指出,避免各位走过多的弯路~

目录

第一章 触发器

第二章 绘图单元

第三章 基础 UI 程序的结构与基础按钮

未完待续...