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

...

使用 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 程序的结构与基础按钮

未完待续...

舒尔特方格小游戏

游戏介绍

学校的心理课上介绍了舒尔特方格这个东西,能锻炼自己的专注力,回家以后写了 300 来行代码实现了这个舒尔特方格小游戏。

玩法就是按照 1~25 的顺序去点击数字,时间越短越好。

更新日志 (2021/11/27) : 对游戏进行大改,重写 UI,加入计分系统

游戏截图

游戏源码下载

这里直接上源码,同学们可以自行复制到自己的编译器里编译。

#include <graphics.h>
#include <conio.h>

#include <fstream>

#include <vector>
#include <algorithm>
#include <string>

#pragma comm
...

合成立方体 (模仿)

游戏介绍

在 4399 上面看到一个很有趣的小游戏:合成立方体(游戏原地址)。

游戏中,玩家需要通过所给的形状去尽可能拼凑出完整的一行一列,然后完整的行列会增加分数,一旦所给的形状无法被塞下,游戏结束。非常简单的游戏,我用了 EasyX 去复原了一下。

游戏运行截图如下:

游戏源码下载

点击这里下载游戏完整源代码