工具条

admin

# 工具条横铺满组件使用文档

## 概述
工具条横铺满组件是一个可配置的界面控件，用于创建具有多种按钮布局的工具条。支持左侧、右侧和中间自适应布局，可放置文本按钮、图标按钮和分隔符等元素。

## 引入方式
```html
<script src="pixi.min.js"></script>
<script src="图标按钮.js"></script>
<script src="工具条横铺满.js"></script>
```

## 基本用法

### 创建工具条
```javascript
const toolbar = new 工具条();
toolbar.初始化(x, y, 宽度, 高度, 配置选项);
场景.addChild(toolbar.获取容器());
```

### 添加按钮
```javascript
// 添加普通文本按钮
toolbar.添加按钮('按钮文本', 回调函数, {配置选项});

// 添加图标按钮
toolbar.添加图标按钮('图标路径或纹理', 回调函数, {文本: '按钮文本', 配置选项});

// 添加纯图标
toolbar.添加图标('图标路径或纹理', 回调函数, {配置选项});

// 添加分隔符
toolbar.添加分隔符({配置选项});
```

## 配置选项

### 工具条初始化选项
```javascript
{
    宽度: 600,                 // 工具条宽度
    高度: 40,                  // 高度
    背景颜色: 0x2c2c2c,        // 背景颜色
    背景透明度: 0.9,           // 背景透明度
    边框颜色: 0x444444,        // 边框颜色
    边框宽度: 1,               // 边框宽度
    圆角: 0,                   // 圆角

    方向: '水平',              // "水平" 或 "垂直"
    内边距: 8,                 // 四周内边距
    间距: 8,                   // 按钮间距

    按钮宽度: 100,             // 默认按钮宽度
    按钮高度: 24,              // 默认按钮高度
    按钮圆角: 4,               // 默认按钮圆角

    按钮背景颜色: 0x3498db,
    按钮背景透明度: 1,
    按钮边框颜色: 0x2980b9,
    按钮边框宽度: 1,
    按钮字体: 'Arial',
    按钮字号: 14,
    按钮文字颜色: 0xffffff,
    分隔线颜色: 0x666666,      // 分隔符颜色
    分隔线透明度: 1,           // 分隔符透明度
    分隔线宽度: 1,             // 分隔符线宽
    右侧起始间距: 8,           // 当有右侧按钮时，左侧与右侧之间的最小间距
    调试模式: false            // 是否输出调试信息
}
```

### 按钮配置选项
```javascript
{
    对齐: 'left',              // 按钮对齐方式: 'left'(左侧) | 'right'(右侧) | 'center'(中间自适应)
    宽度: 100,                 // 按钮宽度，默认使用工具条的按钮宽度
    高度: 24,                  // 按钮高度，默认使用工具条的按钮高度
    间距: 8,                   // 与下一个按钮的间距，默认使用工具条的间距

    // 图标按钮特有选项
    图标位置: 'left',          // 图标在文本的位置: 'left' | 'right' | 'top' | 'bottom' | 'center'
    图标大小: 20,              // 图标大小
    图标间距: 5                // 图标与文本之间的间距
}
```

### 分隔符配置选项
```javascript
{
    对齐: 'left',              // 分隔符位置: 'left'(左侧) | 'right'(右侧)
    颜色: 0x666666,            // 分隔线颜色，默认使用工具条的分隔线颜色
    透明度: 1,                 // 分隔线透明度，默认使用工具条的分隔线透明度
    宽度: 1,                   // 分隔线宽度，默认使用工具条的分隔线宽度
    间距: 8                    // 与下一个元素的间距，默认使用工具条的间距
}
```

## 方法列表

### 初始化
```javascript
工具条.初始化(x, y, 宽度, 高度, 配置选项);
```

### 添加按钮和元素
```javascript
工具条.添加按钮(文本, 回调函数, 配置选项);
工具条.添加图标按钮(图标, 回调函数, 配置选项);
工具条.添加图标(图标, 回调函数, 配置选项);
工具条.添加分隔符(配置选项);
```

### 设置和获取
```javascript
工具条.设置尺寸(宽度, 高度);
工具条.设置宽高(类型, 宽度, 高度);  // 类型：0(固定) 1(百分比/混合) 3(最大不超父容器)
工具条.设置位置(x, y);
工具条.获取容器();  // 返回PIXI.Container对象
```

### 其他操作
```javascript
工具条.清空按钮();  // 删除所有按钮
工具条.更新选项(配置选项);  // 更新工具条配置并重绘
```

## 示例

### 基本工具条
```javascript
const toolbar = new 工具条();
toolbar.初始化(10, 10, 800, 40);
toolbar.添加按钮('文件', () => console.log('文件'));
toolbar.添加按钮('编辑', () => console.log('编辑'));
toolbar.添加分隔符();
toolbar.添加图标按钮('save.png', () => console.log('保存'), {文本: '保存'});
toolbar.添加按钮('帮助', () => console.log('帮助'), {对齐: 'right'});
app.stage.addChild(toolbar.获取容器());
```

### 带中间自适应区域的工具条
```javascript
const toolbar = new 工具条();
toolbar.初始化(10, 10, 800, 40);
toolbar.添加按钮('文件', () => console.log('文件'));
toolbar.添加按钮('编辑', () => console.log('编辑'));
toolbar.添加分隔符();
toolbar.添加按钮('搜索', () => console.log('搜索'), {对齐: 'center'});
toolbar.添加图标按钮('settings.png', () => console.log('设置'), {对齐: 'right'});
app.stage.addChild(toolbar.获取容器());
```

### 垂直工具条
```javascript
const toolbar = new 工具条();
toolbar.初始化(10, 10, 40, 300, {方向: '垂直'});
toolbar.添加图标('file.png', () => console.log('文件'));
toolbar.添加图标('edit.png', () => console.log('编辑'));
toolbar.添加分隔符();
toolbar.添加图标('save.png', () => console.log('保存'));
app.stage.addChild(toolbar.获取容器());
```

admin

工具条.添加按钮(文本, 回调, {
    // 基础属性
    背景颜色: 0xRRGGBB,
    背景透明度: 0-1,
    边框颜色: 0xRRGGBB,
    边框透明度: 0-1,
    边框宽度: 数值,
   
    // 新增属性
    图标透明度: 0-1,
    图标颜色: 0xRRGGBB,
   
    // 状态样式
    悬停样式: {背景颜色, 背景透明度, 边框颜色, ...},
    按下样式: {背景颜色, 背景透明度, 边框颜色, ...},
    禁用样式: {背景颜色, 背景透明度, 边框颜色, ...}
});