|
|
Read file: 图标按钮.js
# 图标按钮组件使用文档
## 组件概述
图标按钮组件是一个基于PIXI.js的交互式UI组件，支持图标和文本的灵活布局，具有四种状态（常规、悬停、按下、禁用）和多种自定义选项。
## 基本用法
### 创建实例
```javascript
const btn = new 图标按钮();
btn.初始化(
x坐标, // 按钮x坐标
y坐标, // 按钮y坐标
"按钮文本", // 按钮文本内容
"图标路径.png", // 图标路径或PIXI.Texture对象
function() { // 点击回调函数
console.log("按钮被点击");
},
{ // 可选配置项
图标位置: 'left',
背景颜色: 0x3498db
}
);
// 将按钮添加到舞台
app.stage.addChild(btn.获取容器());
```
## 主要API
### 初始化方法
```javascript
btn.初始化(x, y, 文本, 图标源, 点击回调, 选项);
```
- `x`: 按钮X坐标
- `y`: 按钮Y坐标
- `文本`: 按钮文本，为空/null/undefined则不显示文本
- `图标源`: 图标纹理或图片路径，为null或加载失败则不显示图标
- `点击回调`: 点击事件回调函数
- `选项`: 可选配置对象，详见下方配置选项
### 尺寸与位置
```javascript
btn.设置宽高(类型, 宽, 高); // 设置按钮宽高
btn.设置边距(左, 右, 上, 下); // 设置内边距
btn.设置位置(x, y); // 设置按钮位置
btn.设置X坐标(x); // 设置X坐标
btn.设置Y坐标(y); // 设置Y坐标
btn.获取位置(); // 返回当前位置 {x, y}
btn.获取尺寸(); // 返回当前尺寸 {宽度, 高度}
```
#### 宽高设置类型
- `0`: 固定宽高
- `1`: 百分比/混合模式
- `3`: 最大不超过父容器
- `4`: 自动计算宽高
### 外观设置
```javascript
btn.设置文本("新文本"); // 更改按钮文本
btn.设置图标("新图标.png"); // 更改按钮图标
btn.设置默认图标("默认图标.png"); // 设置图标加载失败时的默认图标
btn.设置图标位置("left"); // 设置图标位置
btn.设置图标大小(24); // 设置图标大小
btn.设置图标偏移(2, 0); // 设置图标偏移
btn.设置文本偏移(0, -1); // 设置文本偏移
btn.设置禁用(true); // 设置禁用状态
```
### 销毁
```javascript
btn.销毁(); // 销毁按钮，释放资源
```
### 获取容器
```javascript
const container = btn.获取容器(); // 获取PIXI容器对象
```
## 配置选项
| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| 宽度 | number | null | 按钮宽度，null时自动计算 |
| 高度 | number | null | 按钮高度，null时自动计算 |
| 边距左 | number | 10 | 左边距 |
| 边距右 | number | 10 | 右边距 |
| 边距上 | number | 6 | 上边距 |
| 边距下 | number | 6 | 下边距 |
| 最小宽度 | number | 30 | 最小宽度 |
| 最小高度 | number | 30 | 最小高度 |
| 文本 | string | '按钮' | 按钮文本 |
| 字体 | string | 'Arial' | 文本字体 |
| 字号 | number | 16 | 文本大小 |
| 文本颜色 | number | 0x000000 | 文本颜色 |
| 背景颜色 | number | 0x3498db | 背景颜色 |
| 背景透明度 | number | 1 | 背景透明度 |
| 边框颜色 | number | 0x2980b9 | 边框颜色 |
| 边框透明度 | number | 1 | 边框透明度 |
| 边框宽度 | number | 1 | 边框宽度 |
| 圆角 | number | 4 | 圆角大小 |
| 禁用 | boolean | false | 是否禁用 |
| 图标位置 | string | 'left' | 图标位置，可选值: 'left', 'right', 'top', 'bottom', 'center' |
| 图标大小 | number | 20 | 图标大小 |
| 图标间距 | number | 0 | 图标与文本间距 |
| 图标偏移X | number | 0 | 图标X方向偏移 |
| 图标偏移Y | number | 0 | 图标Y方向偏移 |
| 文本偏移X | number | 0 | 文本X方向偏移 |
| 文本偏移Y | number | 0 | 文本Y方向偏移 |
| 默认图标 | string/PIXI.Texture | null | 图标加载失败时显示的默认图标 |
| 自动宽高 | boolean | true | 是否自动计算宽高 |
| 调试模式 | boolean | false | 是否输出调试信息 |
## 事件
按钮会触发以下事件，可通过容器对象监听：
```javascript
btn.获取容器().on('鼠标进入', function(文本) { ... });
btn.获取容器().on('鼠标离开', function(文本) { ... });
btn.获取容器().on('按下', function(文本) { ... });
btn.获取容器().on('弹起', function(文本) { ... });
btn.获取容器().on('点击', function(文本) { ... });
btn.获取容器().on('图标加载完成', function(图标源) { ... });
btn.获取容器().on('图标加载失败', function(错误信息) { ... });
```
## 注意事项
1. 图标加载支持本地路径和网络URL，加载失败时可显示默认图标
2. 自动宽高模式下，按钮会根据内容自动调整大小，同时考虑边距和最小尺寸
3. 图标位置支持五种布局方式：左、右、上、下、中心
4. 文本和图标可以通过偏移值进行微调
5. 禁用状态下按钮透明度降低，且不响应交互事件
6. 调试模式下会在控制台输出布局计算过程，方便排查问题
## 示例代码
### 基本示例
```javascript
const iconBtn = new 图标按钮();
iconBtn.初始化(
100, 100,
"确定",
"icons/confirm.png",
function() {
console.log("确定按钮被点击");
},
{
背景颜色: 0x4CAF50,
边框颜色: 0x388E3C,
图标大小: 16
}
);
app.stage.addChild(iconBtn.获取容器());
```
### 自动宽高示例
```javascript
const autoSizeBtn = new 图标按钮();
autoSizeBtn.初始化(
100, 200,
"自动调整大小的按钮",
"icons/resize.png",
null,
{
自动宽高: true,
边距左: 15,
边距右: 15,
图标位置: 'left'
}
);
app.stage.addChild(autoSizeBtn.获取容器());
```
### 不同图标位置示例
```javascript
const positions = ['left', 'right', 'top', 'bottom', 'center'];
positions.forEach((pos, index) => {
const btn = new 图标按钮();
btn.初始化(
100, 100 + index * 60,
"图标" + pos,
"icons/arrow.png",
null,
{
图标位置: pos,
背景颜色: 0x3F51B5
}
);
app.stage.addChild(btn.获取容器());
});
```
|
|
发表
组件文档
36 人阅读
|
1 人回复
