滑块条设计理念

admin

我来为滑块条组件编写详细的功能说明文档。

# 滑块条组件使用文档

## 1. 基本介绍
滑块条组件是一个可交互的滑动控件，支持水平和垂直两种方向，可以用于数值调节、进度显示等场景。组件支持自定义样式、数值显示和直接输入等功能。

## 2. 主要特性
- 支持水平和垂直两种方向
- 可自定义轨道和滑块的样式
- 支持数值显示和直接输入
- 支持设置最大最小值范围
- 支持步进值设置
- 支持禁用状态
- 支持事件监听

## 3. 初始化方法
```javascript
var 滑块 = new 滑块条();
滑块.初始化(x, y, 宽度, 高度, 选项);
```

### 参数说明
- `x`: 位置x坐标
- `y`: 位置y坐标
- `宽度`: 轨道宽度
- `高度`: 轨道高度
- `选项`: 可选配置对象

### 默认配置选项
```javascript
{
    宽度: 200,           // 轨道宽度
    高度: 20,            // 轨道高度
    方向: '水平',        // 方向：'水平' 或 '垂直'
    最小值: 0,           // 最小值
    最大值: 100,         // 最大值
    当前值: 50,          // 当前值
    步进值: 1,           // 步进值
    显示数值: true,      // 是否显示数值
    可编辑: true,        // 是否可编辑数值
    背景颜色: 0xeeeeee,  // 轨道背景颜色
    滑块颜色: 0x3498db,  // 滑块颜色
    文本颜色: 0x333333,  // 文本颜色
    文本大小: 14,        // 文本大小
    文本字体: 'Arial',   // 文本字体
    圆角: 4,            // 轨道圆角
    滑块宽度: 24,        // 滑块宽度
    滑块高度: 24,        // 滑块高度
    轨道边框颜色: 0xcccccc,  // 轨道边框颜色
    轨道边框宽度: 1,        // 轨道边框宽度
    轨道边框透明度: 1,      // 轨道边框透明度
    滑块边框颜色: 0x2980b9,  // 滑块边框颜色
    滑块边框宽度: 1,        // 滑块边框宽度
    滑块边框透明度: 1,      // 滑块边框透明度
    滑块圆角: 12,        // 滑块圆角
    允许穿透: false,     // 是否允许穿透
    调试模式: false      // 是否启用调试模式
}
```

## 4. 主要方法

### 4.1 值控制
```javascript
滑块.设置值(值);           // 设置当前值
滑块.获取值();             // 获取当前值
滑块.设置范围(最小值, 最大值); // 设置值范围
滑块.设置步进值(步进值);     // 设置步进值
```

### 4.2 方向控制
```javascript
滑块.设置方向(方向);        // 设置方向（'水平' 或 '垂直'）
滑块.获取方向();            // 获取当前方向
```

### 4.3 轨道样式设置
```javascript
滑块.设置轨道颜色(颜色);           // 设置轨道背景颜色
滑块.设置轨道透明度(透明度);       // 设置轨道整体透明度
滑块.设置轨道边框颜色(颜色);       // 设置轨道边框颜色
滑块.设置轨道边框宽度(宽度);       // 设置轨道边框宽度
滑块.设置轨道边框透明度(透明度);   // 设置轨道边框透明度
滑块.设置轨道圆角(圆角);          // 设置轨道圆角大小
```

### 4.4 滑块样式设置
```javascript
滑块.设置滑块颜色(颜色);           // 设置滑块颜色
滑块.设置滑块透明度(透明度);       // 设置滑块整体透明度
滑块.设置滑块边框颜色(颜色);       // 设置滑块边框颜色
滑块.设置滑块边框宽度(宽度);       // 设置滑块边框宽度
滑块.设置滑块边框透明度(透明度);   // 设置滑块边框透明度
滑块.设置滑块圆角(圆角);          // 设置滑块圆角大小
滑块.设置滑块尺寸(宽度, 高度);     // 设置滑块尺寸
```

### 4.5 状态控制
```javascript
滑块.设置禁用(禁用);        // 设置禁用状态
滑块.获取禁用();            // 获取禁用状态
```

### 4.6 其他方法
```javascript
滑块.获取容器();            // 获取容器对象
滑块.销毁();               // 销毁滑块条
```

## 5. 事件监听
```javascript
滑块.容器.on('值改变', function(值) {
    console.log('滑块值改变:', 值);
});
```

## 6. 使用示例

### 6.1 基本使用
```javascript
var 滑块 = new 滑块条();
滑块.初始化(100, 100, 200, 20);
app.stage.addChild(滑块.获取容器());
```

### 6.2 自定义样式
```javascript
var 滑块 = new 滑块条();
滑块.初始化(100, 100, 200, 20, {
    方向: '水平',
    最小值: 0,
    最大值: 100,
    当前值: 50,
    步进值: 1,
    显示数值: true,
    可编辑: true,
    滑块宽度: 30,
    滑块高度: 30,
    滑块圆角: 15
});

// 设置轨道样式
滑块.设置轨道颜色(0xf0f0f0);
滑块.设置轨道透明度(0.8);
滑块.设置轨道边框颜色(0xcccccc);
滑块.设置轨道边框宽度(2);

// 设置滑块样式
滑块.设置滑块颜色(0x3498db);
滑块.设置滑块透明度(0.9);
滑块.设置滑块边框颜色(0x2980b9);
滑块.设置滑块边框宽度(1);
```

### 6.3 垂直滑块
```javascript
var 垂直滑块 = new 滑块条();
垂直滑块.初始化(100, 100, 20, 200, {
    方向: '垂直',
    滑块宽度: 30,
    滑块高度: 30,
    滑块圆角: 15
});
```

## 7. 注意事项
1. 滑块尺寸可以超出轨道范围，建议根据实际需求设置合适的尺寸
2. 设置滑块圆角时，建议设置为宽度/高度的一半，可以实现圆形效果
3. 使用垂直方向时，注意调整容器尺寸以适应显示
4. 所有样式设置方法都可以随时调用，会立即更新显示效果
5. 销毁组件时，请调用`销毁()`方法以清理资源

## 8. 常见问题
1. Q: 如何实现圆形滑块？
   A: 设置滑块宽度和高度相等，并将滑块圆角设置为宽度/高度的一半

2. Q: 如何禁用滑块？
   A: 使用`设置禁用(true)`方法

3. Q: 如何监听值的变化？
   A: 使用`容器.on('值改变', callback)`方法

4. Q: 如何设置滑块可以超出轨道？
   A: 直接设置滑块尺寸大于轨道尺寸即可，组件会自动处理居中显示

这个文档涵盖了滑块条组件的主要功能和使用方法。如果你需要补充其他内容，请告诉我。