进度条理念设计

admin

我来帮您整理进度条组件的功能和方法文档：

# 进度条组件使用文档

## 1. 基本介绍
进度条组件用于显示进度和完成状态，支持水平和垂直两种方向，可自定义样式和显示方式。

## 2. 主要特性
- 支持水平和垂直方向
- 支持显示数值和百分比
- 支持自定义进度范围
- 支持自定义样式（颜色、边框、圆角等）
- 支持事件监听

## 3. 初始化方法
```javascript
var 进度条1 = new 进度条();
进度条1.初始化(x, y, 宽度, 高度, {
    // 配置选项
});
```

## 4. 参数说明
### 4.1 基础参数
- `x`: 位置x坐标
- `y`: 位置y坐标
- `宽度`: 进度条宽度
- `高度`: 进度条高度

### 4.2 配置选项
```javascript
{
    方向: 'horizontal',      // 方向：'horizontal'水平，'vertical'垂直
    最小值: 0,              // 最小值
    最大值: 100,            // 最大值
    当前值: 0,              // 当前值
    显示数值: true,         // 是否显示数值
    显示百分比: true,       // 是否显示百分比
    文本大小: 14,           // 文本大小
    文本颜色: 0x333333,     // 文本颜色
    文本字体: 'Arial',      // 文本字体
    背景颜色: 0xf5f5f5,     // 背景颜色
    背景透明度: 1,          // 背景透明度
    背景边框颜色: 0xcccccc, // 背景边框颜色
    背景边框宽度: 1,        // 背景边框宽度
    背景边框透明度: 1,      // 背景边框透明度
    背景圆角: 4,            // 背景圆角
    进度条颜色: 0x2196f3,   // 进度条颜色
    进度条透明度: 1,        // 进度条透明度
    进度条边框颜色: 0x1976d2, // 进度条边框颜色
    进度条边框宽度: 1,      // 进度条边框宽度
    进度条边框透明度: 1,    // 进度条边框透明度
    进度条圆角: 4,          // 进度条圆角
    允许穿透: false,        // 是否允许穿透
    调试模式: false         // 是否启用调试模式
}
```

## 5. 主要方法

### 5.1 基础操作
- `初始化(x, y, 宽度, 高度, 选项)` - 初始化进度条
- `设置值(值)` - 设置当前值
- `获取值()` - 获取当前值
- `设置范围(最小值, 最大值)` - 设置进度范围
- `设置方向(方向)` - 设置进度条方向
- `获取方向()` - 获取当前方向

### 5.2 轨道样式设置
- `设置轨道颜色(颜色)` - 设置轨道背景颜色
- `设置轨道透明度(透明度)` - 设置轨道背景透明度
- `设置轨道边框颜色(颜色)` - 设置轨道边框颜色
- `设置轨道边框宽度(宽度)` - 设置轨道边框宽度
- `设置轨道边框透明度(透明度)` - 设置轨道边框透明度
- `设置轨道圆角(圆角)` - 设置轨道圆角大小

### 5.3 进度条样式设置
- `设置进度条颜色(颜色)` - 设置进度条颜色
- `设置进度条透明度(透明度)` - 设置进度条透明度
- `设置进度条边框颜色(颜色)` - 设置进度条边框颜色
- `设置进度条边框宽度(宽度)` - 设置进度条边框宽度
- `设置进度条边框透明度(透明度)` - 设置进度条边框透明度
- `设置进度条圆角(圆角)` - 设置进度条圆角大小

### 5.4 文本显示设置
- `设置文本颜色(颜色)` - 设置文本颜色
- `设置文本大小(大小)` - 设置文本大小
- `设置文本字体(字体)` - 设置文本字体
- `设置显示数值(显示)` - 设置是否显示数值
- `设置显示百分比(显示)` - 设置是否显示百分比

### 5.5 其他方法
- `获取容器()` - 获取PIXI容器对象
- `销毁()` - 销毁进度条

## 6. 事件监听
```javascript
进度条1.容器.on('进度改变', function(当前值, 百分比) {
    console.log('当前值:', 当前值);
    console.log('百分比:', 百分比);
});
```

## 7. 使用示例
```javascript
// 创建水平进度条
var 进度条1 = new 进度条();
进度条1.初始化(100, 100, 200, 20, {
    当前值: 80,
    显示百分比: true,
    进度条颜色: 0x4caf50
});

// 创建垂直进度条
var 进度条2 = new 进度条();
进度条2.初始化(100, 150, 20, 200, {
    方向: 'vertical',
    当前值: 60,
    显示数值: true,
    进度条颜色: 0xf44336
});

// 添加到舞台
app.stage.addChild(进度条1.获取容器());
app.stage.addChild(进度条2.获取容器());
```

## 8. 注意事项
1. 进度条支持水平和垂直两种方向，通过`方向`参数设置
2. 可以同时显示数值和百分比，也可以只显示其中一种
3. 垂直进度条时，文本会自动旋转90度显示
4. 所有样式都可以通过相应的方法动态修改
5. 进度值必须在最小值和最大值范围内

这个文档涵盖了进度条组件的主要功能和使用方法。如果您需要补充或修改任何部分，请告诉我。