EGE专栏:EGE专栏
上一篇:EGE绘图之四 Gif动图播放
下一篇:EGE绘图之五 按钮(下)
文章最后修改时间:2021年7月7日22:24:34
一、按钮功能
按钮最基本的功能便是响应点击事件,再有便是长按事件,长按事件不一定会响应。
1. 普通按钮
普通按钮一般只响应点击和长按事件,事件触发后,进行相应动作。
2. 可选按钮
可选按钮会添加选中状态,可以进行选中和取消选中操作,是按钮处于选中状态和非选中状态。一般由点击事件或长按事件触发。
当多个可选按钮组成一个组时,根据可选行为的不同,一般分为 单选按钮 和 复选框。
2.1 单选按钮 (Radio Button)
在一个按钮组中,单选按钮最多只能有一个被选中。当一个按钮被选中时,按钮组中的其它按钮都要处于非选中状态。(就和常见的单选题类似)
2.2 复选框 (Check Box)
在一个按钮组中,每个按钮都可以独立地被设置为选中或非选中状态。(就和常见的多选题类似)
如下所示:
- 上面一排为Radio Button,每一列都为一组,一组中只能有一个被选中。
- 下面一排为Check Box, 每一列为一组,一组种可以有多个被选中。
3. 多功能按钮
按钮可以添加不同的属性,根据点击和长按事件,响应不同的动作。
如下方的带进度条和执行结果的按钮,弹出和收入菜单的按钮等,这些效果和行为,可以根据需要进行自定义。
二、按钮样式
下面是一些按钮的常见样式
还有各种各样的按钮特效
三、 按钮点击
1. 按钮点击的确定
在GUI界面中按钮是最常见的,通过鼠标悬停,点击,拖动等执行不同的动作。
接下来就讲解如何自定义按钮来执行鼠标点击事件。
鼠标点击事件前面已经讲解过,当鼠标消息类型是按下或抬起时,就可以确定鼠标在执行点击操作,因为鼠标按键没有长按消息,长按也不会再次发出按下消息。
获取到鼠标按键按下或抬起消息后,还需判断消息是由左中右键中的哪个按键发出。
如,判断鼠标左键按下:
if (msg.is_left() && msg.is_down()) {
//鼠标左键按下
}
如,判断鼠标右键松开:
if (msg.is_right() && msg.is_up()) {
//鼠标左键按下
}
对于普通按钮,当前对按钮点击动作的一般处理方式是:
- 鼠标按下:仅确定鼠标所点击的按钮,而不执行实际的按钮点击动作。
- 鼠标抬起:执行相应按钮的点击动作响应。
当然,也可以在鼠标按键按下时直接执行按钮点击动作响应,而不是等到鼠标按键抬起时再执行。这样可以简化代码,并且适合需要快速响应的情况。
这里主要以鼠标按键抬起时刻确定按键点击。
2.按钮的点击判定
按钮的点击判定:当鼠标进行点击时,判断点击位置是否在按钮的点击区域内,即需要判定一个点是否在某个区域内部。
按钮点击区域的形状通常是矩形、圆形和圆角矩形的,也有以及其,这几种形状最多。
按钮区域和可点击区域并不一定重合。
矩形区域和圆形区域的判定较为容易,圆角矩形复杂一些,因此,有些圆角矩形形状的按钮,圆角较小的,仍用矩形区域判定。
2.1 矩形区域点击判定
2.1.1 矩形区域的表示
矩形区域有多种表示方式,但都表示同一个区域,进行简单的转换即可。
矩形区域表示方式:
- 左上角位置(x, y), 宽 width, 高 height
- 左上角位置(left, top), 右下角位置(right, bottom)
这两种方式的区别就在于一个是右下角,一个宽高,这两种分别适用不同的情况。转换很简单,关系就是
w i d t h = r i g h t − l e f t h e i g h t = b o t t o m − t o p width = right - left \\ height = bottom - top width=right−leftheight=bottom−top
根据等式稍微变换计算一下即可。
2.1.2 点在矩形区域内的判定
判断点在矩形区域内,点(x, y) 在 矩形区域(left, top,right, bottom) 内,则满足以下关系:
l
e
f
t
⩽
x
<
r
i
g
h
t
t
o
p
⩽
y
<
b
o
t
t
o
m
left \leqslant x < right \\ top \leqslant y < bottom
left⩽x<righttop⩽y<bottom
用代码表示即为
(left <= x) && (x < right) && (top <= y) && (y < bottom)
2.1.3 矩形区域点击判断示例
#include <graphics.h>
#include <math.h>
// 矩形按钮
struct RectButton
{
int x, y;
int width, height;
};
// 判断点(x, y) 是否在按钮点击区域内
bool insideRectButton(const RectButton* button, int x, int y);
// 绘制按钮
void drawRectButton(const RectButton* button);
void draw();
//定义按钮,确定区域
RectButton button = {
220, 200, /* x, y */
200, 80, /* width, height */
};
int clickCount = 0;
int main()
{
initgraph(640, 480, INIT_RENDERMANUAL);
setbkcolor(WHITE);
ege_enable_aa(true);
bool clickButton = false;
bool redraw = true;
for (; is_run(); delay_fps(60)) {
while (mousemsg()) {
mouse_msg msg = getmouse();
//判断鼠标左键点击(左键按下确定位置,抬起为执行时刻)
if (msg.is_left()) {
if (msg.is_down()) {
//检测点击的按钮
clickButton = insideRectButton(&button, msg.x, msg.y);
}
else {
//左键抬起,判断是否需要执行事件响应
if (clickButton)
{
clickButton = false;
redraw = true;
clickCount++;
}
}
}
}
//绘制
if (redraw) {
cleardevice();
draw();
redraw = false;
}
}
return 0;
}
bool insideRectButton(const RectButton* button, int x, int y)
{
return (x >= button->x) && (y >= button->y)
&& (x < button->x + button->width)
&& (y < button->y + button->height);
}
void drawRectButton(const RectButton* button)
{
setfillcolor(EGERGB(0x1E, 0x90, 0xFF));
bar(button->x, button->y, button->x + button->width, button->y + button->height);
}
void draw()
{
drawRectButton(&button);
setcolor(BLACK);
setfont(24, 0, "");
xyprintf(240, 360, "点击按钮次数:%d", clickCount);
}
2.2 圆形区域的点击判定
2.2.1 圆形区域的表示
圆形区域有两种表示方法:
- 圆心和半径
- 用包围矩形区域的表述
这两种转换关系也很简单
{ x = l e f t + r i g h t 2 y = t o p + b o t t o m 2 r a d i u s = r i g h t − l e f t 2 \left\{\begin{aligned} x&=\dfrac{left+right}{2}\\ y&=\dfrac{top+bottom}{2}\\ radius&=\dfrac{right-left}{2}\\ \end{aligned} \right. ⎩⎪⎪⎪⎪⎪⎨⎪⎪⎪⎪⎪⎧xyradius=2left+right=2top+bottom=2right−left
{ l e f t = x − r a d i u s t o p = y − r a d i u s w i d t h = 2 ⋅ r a d i u s h e i g h t = 2 ⋅ r a d i u s \left\{ \begin{aligned} left&=x-radius\\ top&=y-radius\\ width&=2\cdot radius\\ height&=2\cdot radius\\ \end{aligned} \right. ⎩⎪⎪⎪⎪⎨⎪⎪⎪⎪⎧lefttopwidthheight=x−radius=y−radius=2⋅radius=2⋅radius
2.2.2 点在圆形区域内的判定
如果点
P
(
x
,
y
)
P(x, y)
P(x,y)在一个圆心为
C
(
x
0
,
y
0
)
C(x_0,y_0)
C(x0,y0),半径为
r
r
r的 圆内,点
P
P
P与圆心
C
C
C的距离
d
d
d有以下关系:
d
=
(
x
−
x
0
)
2
+
(
y
−
y
0
)
2
⩽
r
d =\sqrt{\left( x-x_0 \right) ^2+\left( y-y_0 \right) ^2}\leqslant r
d=(x−x0)2+(y−y0)2⩽r
由于开方运行复杂,可将两边同时平方,不等号方向保持不变,可得:
(
x
−
x
0
)
2
+
(
y
−
y
0
)
2
⩽
r
2
\left( x-x_0 \right) ^2+\left( y-y_0 \right) ^2\leqslant r^2
(x−x0)2+(y−y0)2⩽r2
用代码表示:
//计算点与圆心的xy差值
int dx = x - x0;
int dy = y - y0;
//(点到圆心距离的平方) 小于等于 (半径的平方)
(dx * dx + dy * dy) <= (r * r)
2.2.3 圆形区域点击判定示例
#include <graphics.h>
#include <math.h>
// 圆形按钮
struct CircleButton
{
int x, y;
int radius;
};
// 判断点(x, y) 是否在按钮点击区域内
bool insideCircleButton(const CircleButton* button, int x, int y);
// 绘制按钮
void drawCircleButton(const CircleButton* button);
void draw();
//定义按钮,确定区域
CircleButton button = {
320, 240, /* x, y */
100, /* radius */
};
int clickCount = 0;
int main()
{
initgraph(640, 480, INIT_RENDERMANUAL);
setbkcolor(WHITE);
ege_enable_aa(true);
bool clickButton = false;
bool redraw = true;
for (; is_run(); delay_fps(60)) {
while (mousemsg()) {
mouse_msg msg = getmouse();
//判断鼠标左键点击(左键按下确定位置,抬起为执行时刻)
if (msg.is_left()) {
if (msg.is_down()) {
//检测点击的按钮
clickButton = insideCircleButton(&button, msg.x, msg.y);
}
else {
//左键抬起,判断是否需要执行事件响应
if (clickButton)
{
clickButton = false;
redraw = true;
clickCount++;
}
}
}
}
//绘制
if (redraw) {
cleardevice();
draw();
redraw = false;
}
}
return 0;
}
bool insideCircleButton(const CircleButton* button, int x, int y)
{
int dx = x - button->x, dy = y - button->y;
return (dx * dx + dy * dy) <= (button->radius * button->radius);
}
void drawCircleButton(const CircleButton* button)
{
setfillcolor(EGEARGB(0xFF, 0x1E, 0x90, 0xFF));
//高级绘图函数
ege_fillellipse(button->x - button->radius, button->y - button->radius,
2 * button->radius, 2 * button->radius);
//或者使用下面的普通绘图函数
//fillellipse(button->x, button->y, button->radius, button->radius);
}
void draw()
{
drawCircleButton(&button);
setcolor(BLACK);
setfont(24, 0, "");
xyprintf(240, 360, "点击按钮次数:%d", clickCount);
}
2.3 圆角矩形区域的点击判定
圆角矩形即矩形的四个角不再是直角,取而代之的是四个90°的圆弧。一般圆角矩形四个圆角的半径都是相等的,有些可以不相等,这里的圆角矩形是前者。
2.3.1 圆角矩形区域的表示
取圆角矩形的包围矩形的位置和大小参数,额外一个参数设定圆角的半径。圆角的半径最大不能大于短边的一半。
2.3.2 点在圆角矩形区域内的判定
首先,如果点在圆角矩形区域内部,则肯定满足点在圆角矩形外部包围矩形内部的条件。
如果点在圆角矩形区域内部,需要两个条件同时成立。
条件1: 点P 位于 圆角矩形包围矩形 的内部。
(left <= x) && (x < right) && (top <= y) && (y < bottom)
与矩形不同的是,即使位于包围矩形内,但是点也可能在圆角处。因此增加在圆角处的判断:
由对称性质,以圆角矩形中心为原点,可以将圆角矩形分成四个区域,并对称映射到第一象限,如下图所示。
当点位于图中所示橙色正方形内部时,可以根据点是否在圆角所在的圆内来判断。
条件2: 在满足条件1的情况下,属于下面情况两个:
- 当点P位于圆角的正方形内时,点P位于圆角所在的圆内。
- 点P不在圆角的正方形内。
下图为判断流程:
比较复杂的是在圆角处的判断:
当
x
⩾
w
2
−
r
x\geqslant \dfrac{w}{2}-r
x⩾2w−r 且
y
⩾
h
2
−
r
y\geqslant \dfrac{h}{2}-r
y⩾2h−r 时,点P在圆角矩形的圆角处。此时,如果点P在圆角矩形内,则满足关系:
(
x
−
(
w
2
−
r
)
)
2
+
(
y
−
(
h
2
−
r
)
)
2
⩽
r
2
\left( x-\left( \dfrac{w}{2}-r \right) \right) ^2+\left( y-\left( \dfrac{h}{2}-r \right) \right) ^2\leqslant \,\,r^2
(x−(2w−r))2+(y−(2h−r))2⩽r2
2.3.3 圆角矩形区域点击判定示例
#include <graphics.h>
#include <math.h>
// 圆角矩形按钮
struct RoundRectButton
{
int x, y;
int width, height;
float radius;
};
// 判断点(x, y) 是否在按钮点击区域内
bool insideRoundRectButton(const RoundRectButton* button, int x, int y);
// 绘制按钮
void drawRoundRectButton(const RoundRectButton* button);
void draw();
//定义按钮,确定区域
RoundRectButton button = {
320 - 100, 240 - 80, /* x, y */
200, 160, /* width, height */
40, /* cornerRadius */
};
int clickCount = 0;
int main()
{
initgraph(640, 480, INIT_RENDERMANUAL);
setbkcolor(WHITE);
ege_enable_aa(true);
bool clickButton = false;
bool redraw = true;
for (; is_run(); delay_fps(60)) {
while (mousemsg()) {
mouse_msg msg = getmouse();
//判断鼠标左键点击(左键按下确定位置,抬起为执行时刻)
if (msg.is_left()) {
if (msg.is_down()) {
//检测点击的按钮
clickButton = insideRoundRectButton(&button, msg.x, msg.y);
}
else {
//左键抬起,点击动作执行
if (clickButton)
{
clickButton = false;
redraw = true;
clickCount++;
}
}
}
}
//绘制
if (redraw) {
cleardevice();
draw();
redraw = false;
}
}
return 0;
}
bool insideRoundRectButton(const RoundRectButton* button, int x, int y)
{
bool inside = false;
// 点在包围矩形内
if ((x >= button->x) && (y >= button->y)
&& (x < button->x + button->width)
&& (y < button->y + button->height)
) {
float centerx = button->x + button->width / 2.0f;
float centery = button->y + button->height / 2.0f;
float dx = (float)fabs(x - centerx);
float dy = (float)fabs(y - centery);
float interWidth = button->width / 2.0f - button->radius;
float interHeight = button->height / 2.0f - button->radius;
// 点不在圆角空白处 ()
if (! ((dx > interWidth)
&& (dy > interHeight)
&& ((dx - interWidth) * (dx - interWidth) + (dy - interHeight) * (dy - interHeight)
> button->radius * button->radius)
)
) {
inside = true;
}
}
return inside;
}
void drawRoundRectButton(const RoundRectButton* button)
{
setfillcolor(EGEARGB(0xFF, 0x1E, 0x90, 0xFF));
ege_fillrect((float)(button->x + button->radius), (float)(button->y),
(float)(button->width - 2 * button->radius), float(button->height)
);
ege_fillrect((float)(button->x), (float)(button->y + button->radius),
(float)(button->radius), (float)(button->height - 2 * button->radius)
);
ege_fillrect((float)(button->x + button->width - button->radius),
(float)(button->y + button->radius),
(float)(button->radius), (float)(button->height - 2 * button->radius)
);
float diameter = 2 * button->radius;
float dx = button->width - diameter;
float dy = button->height - diameter;
ege_fillpie((float)(button->x + dx), (float)(button->y + dy), diameter, diameter, 0.0f, 90.0f);
ege_fillpie((float)(button->x), (float)(button->y + dy), diameter, diameter, 90.0f, 90.0f);
ege_fillpie((float)(button->x), (float)(button->y), diameter, diameter, 180.0f, 90.0f);
ege_fillpie((float)(button->x + dx), (float)(button->y), diameter, diameter, 270.0f, 90.0f);
}
void draw()
{
drawRoundRectButton(&button);
setcolor(BLACK);
setfont(24, 0, "");
xyprintf(240, 360, "点击按钮次数:%d", clickCount);
}
3. 多个按钮的点击检测
上面按钮都是定义成结构体,当存在多个按钮的时候,当鼠标点击时,简单的方法就是按一定的顺序去遍历这些按钮,逐一进行点击判断。当检测到有一个按钮被点击到,则执行动作,剩余不再检测。
为了方便,这里创建一个Button数组,逐一检查。当然,这样的前提是按钮没有相互重叠,不然重叠后,是需要按照一定的顺序的。
当然,这样子效率会低一些,对于十几个按钮是没有问题的,如果是大量按钮,就需要使用算法来处理了,这里就不再深入。
for (int i = 0; i < buttonArrayLength; i++) {
// 点击位置在按钮内
if (insideButton(&buttonArray[i], x, y)) {
clickButtonId = i;
break; //退出,已经检测到,后面的按钮不再检测
}
}
3.1 多个按钮检测示例
下面为多个按钮的点击检测示例。底下文字显示点击按钮的ID
#include <graphics.h>
// 圆形按钮
struct CircleButton
{
int x, y; /* 圆心*/
int radius; /* 半径*/
};
// 判断点(x, y)是否在按钮点击区域内部
bool insideButton(const CircleButton* button, int x, int y);
// 绘制所有按钮
void drawCircleButton(const CircleButton buttonArray[], int length);
// 查找 (x, y) 所在的按钮,返回按钮ID, 没有返回 -1
int searchButton(int x, int y, const CircleButton buttonArray[], int length);
// 绘制
void draw();
#define BUTTON_SIZE 8
#define BUTTON_ID_NONE -1
//定义按钮,确定区域
CircleButton buttonArray[BUTTON_SIZE];
// 按下按钮ID
int clickButtonId = BUTTON_ID_NONE;
int main()
{
initgraph(640, 480, INIT_RENDERMANUAL);
setbkcolor(WHITE);
setbkmode(TRANSPARENT);
ege_enable_aa(true);
for (int i = 0; i < BUTTON_SIZE; i++) {
buttonArray[i].x = (i % 2 * 2 + 1) * 640 / 4;
buttonArray[i].y = (i / 2) * 320 / 3 + 60;
buttonArray[i].radius = 50;
}
clickButtonId = BUTTON_ID_NONE;
bool redraw = true;
int btnId = BUTTON_ID_NONE;
for (; is_run(); delay_fps(60)) {
while (mousemsg()) {
mouse_msg msg = getmouse();
// 判断鼠标左键按下(左键按下确定位置,同时判断是否为按钮区域
// 抬起则解除按下状态
if (msg.is_left()) {
if (msg.is_down()) {
// 检查是否有按钮被按下
btnId = searchButton(msg.x, msg.y, buttonArray, BUTTON_SIZE);
}
else {
//左键抬起,判断是否有被点击的按钮,有则执行动作
if (btnId != BUTTON_ID_NONE) {
}
//这里记录点击按钮ID并要求界面重绘
if (btnId != clickButtonId) {
clickButtonId = btnId;
redraw = true;
}
btnId = BUTTON_ID_NONE;
}
}
}
// 判断是否需要重绘,减少不必要的绘制操作
if (redraw) {
cleardevice();
draw();
redraw = false;
}
}
return 0;
}
bool insideButton(const CircleButton* button, int x, int y)
{
int dx = x - button->x, dy = y - button->y;
return (dx * dx + dy * dy) <= (button->radius * button->radius);
}
void drawCircleButton(const CircleButton buttonArray[], int length)
{
setfillcolor(EGEARGB(0xFF, 0x1E, 0x90, 0xFF));
setcolor(WHITE);
settextjustify(CENTER_TEXT, CENTER_TEXT);
setfont(36, 0, "");
for (int i = 0; i < length; i++) {
//高级绘图函数
ege_fillellipse(buttonArray[i].x - buttonArray[i].radius,
buttonArray[i].y - buttonArray[i].radius,
2 * buttonArray[i].radius,
2 * buttonArray[i].radius);
xyprintf(buttonArray[i].x, buttonArray[i].y, "%d", i);
}
}
int searchButton(int x, int y, const CircleButton buttonArray[], int length)
{
int buttonId = BUTTON_ID_NONE;
for (int i = 0; i < length; i++) {
if (insideButton(&buttonArray[i], x, y)) {
buttonId = i;
break; //退出,已经检测到,后面的按钮不再检测
}
}
return buttonId;
}
void draw()
{
//绘制
drawCircleButton(buttonArray, BUTTON_SIZE);
setcolor(BLACK);
setfont(24, 0, "");
settextjustify(LEFT_TEXT, TOP_TEXT);
xyprintf(240, 360, "点击按钮ID:%d", clickButtonId);
}
EGE专栏:EGE专栏
上一篇:EGE绘图之四 Gif动图播放
下一篇:EGE绘图之五 按钮(下)