EGE绘图之五 按钮（上）

EGE专栏：EGE专栏

上一篇：EGE绘图之四 Gif动图播放

下一篇：EGE绘图之五 按钮（下）

---

EGE绘图之（五） 按钮（上）

文章最后修改时间：2021年7月7日22:24:34

目录

• 一、按钮功能
• • 1. 普通按钮
  • 2. 可选按钮
  • • 2.1 单选按钮 (Radio Button)
    • 2.2 复选框 (Check Box)
  • 3. 多功能按钮
• 二、按钮样式
• 三、 按钮点击
• • 1. 按钮点击的确定
  • 2.按钮的点击判定
  • • • 2.1 矩形区域点击判定
      • • 2.1.1 矩形区域的表示
        • 2.1.2 点在矩形区域内的判定
        • 2.1.3 矩形区域点击判断示例
      • 2.2 圆形区域的点击判定
      • • 2.2.1 圆形区域的表示
        • 2.2.2 点在圆形区域内的判定
        • 2.2.3 圆形区域点击判定示例
      • 2.3 圆角矩形区域的点击判定
      • • 2.3.1 圆角矩形区域的表示
        • 2.3.2 点在圆角矩形区域内的判定
        • 2.3.3 圆角矩形区域点击判定示例
  • 3. 多个按钮的点击检测
  • • 3.1 多个按钮检测示例

一、按钮功能

按钮最基本的功能便是响应点击事件，再有便是长按事件，长按事件不一定会响应。

1. 普通按钮

普通按钮一般只响应点击和长按事件，事件触发后，进行相应动作。

2. 可选按钮

可选按钮会添加选中状态，可以进行选中和取消选中操作，是按钮处于选中状态和非选中状态。一般由点击事件或长按事件触发。

当多个可选按钮组成一个组时，根据可选行为的不同，一般分为 单选按钮 和 复选框。

2.1 单选按钮 (Radio Button)

在一个按钮组中，单选按钮最多只能有一个被选中。当一个按钮被选中时，按钮组中的其它按钮都要处于非选中状态。(就和常见的单选题类似)

2.2 复选框 (Check Box)

在一个按钮组中，每个按钮都可以独立地被设置为选中或非选中状态。(就和常见的多选题类似)

如下所示：

• 上面一排为Radio Button，每一列都为一组，一组中只能有一个被选中。
• 下面一排为Check Box, 每一列为一组，一组种可以有多个被选中。
  

3. 多功能按钮

按钮可以添加不同的属性，根据点击和长按事件，响应不同的动作。
如下方的带进度条和执行结果的按钮，弹出和收入菜单的按钮等，这些效果和行为，可以根据需要进行自定义。

二、按钮样式

下面是一些按钮的常见样式

• CSS按钮|菜鸟教程
• Buttons

还有各种各样的按钮特效