小提示

admin

下面是**小提示.js** 组件的详细使用文档，涵盖所有主要API、参数、用法和注意事项。

---

# 小提示组件（TipPool）使用文档

## 简介

小提示组件是基于 PixiJS 8.x 的轻量级消息提示队列，支持对象池、自动动画、三种对齐方式（左上/居中/右上）、自定义图标、文字、背景、边框、内边距等，适合用于游戏、工具、应用的临时提示消息。

---

## 1. 初始化

```js
const tips = new 小提示();
app.stage.addChild(tips.容器);
```

---

## 2. 主要API

### 2.1 添加消息

```js
tips.添加({
    text: '保存成功！',         // 消息内容（必填）
    icon: 'img/success.png',   // 图标（可选，图片路径或PIXI.Texture）
    color: 0x00ff00,           // 文字颜色（可选，默认全局设置）
    fontFamily: 'Arial',       // 字体（可选，默认全局设置）
    fontSize: 20,              // 字号（可选，默认全局设置）
    bgColor: 0x222222,         // 背景色（可选，默认全局设置）
    bgAlpha: 0.85,             // 背景透明度（可选，默认全局设置）
    borderColor: 0x000000,     // 边框颜色（可选，默认全局设置）
    borderWidth: 2,            // 边框宽度（可选，默认全局设置）
    borderAlpha: 1,            // 边框透明度（可选，默认全局设置）
    iconSize: 32,              // 图标大小（可选，默认全局设置）
    align: 'center',           // 对齐方式 'left'|'center'|'right'（可选，默认全局设置）
    padding: {左:16,右:16,上:10,下:10}, // 内边距（可选，默认全局设置）
    moveY: 100,                // 向上移动距离（可选，默认全局设置）
    duration: 1500,            // 动画时长（可选，默认全局设置）
    interval: 10               // 与下一条的间隔（可选，默认全局设置）
});
```

### 2.2 全局配置API

- `tips.设置起点(x, y)`  
  设置所有消息的起点坐标（默认 200, 200）

- `tips.设置向上距离(h)`  
  设置所有消息的上浮距离（默认 80）

- `tips.设置动画时长(ms)`  
  设置所有消息的动画时长（默认 1200 毫秒）

- `tips.设置间隔(n)`  
  设置每条消息之间的垂直间隔（默认 8）

- `tips.设置对齐方式('left'|'center'|'right')`  
  设置所有消息的对齐方式（左上/居中/右上，默认 'left'）

- `tips.设置内边距({左,右,上,下})`  
  设置所有消息的内边距（默认 {左:12, 右:12, 上:8, 下:8}）

- `tips.清空()`  
  立即清空所有正在上浮和队列中的消息

---

### 2.3 全局样式配置（直接改选项）

```js
tips.选项.背景颜色 = 0x00aaff;
tips.选项.背景透明度 = 0.7;
tips.选项.边框颜色 = 0xff0000;
tips.选项.边框宽度 = 3;
tips.选项.边框透明度 = 1;
tips.选项.字体 = '微软雅黑';
tips.选项.字号 = 20;
tips.选项.文字颜色 = 0x00ff00;
```
> 这些设置会影响**后续所有新添加的消息**。

---

## 3. 参数说明

| 参数名         | 说明                   | 类型/示例                | 作用/备注                  |
|----------------|------------------------|--------------------------|----------------------------|
| text           | 消息内容               | '保存成功'               | 必填                       |
| icon           | 图标                   | 'img/ok.png' / Texture   | 可选                       |
| color          | 文字颜色               | 0xff0000                 | 单条优先于全局             |
| fontFamily     | 字体                   | 'Arial'                  | 单条优先于全局             |
| fontSize       | 字号                   | 18                       | 单条优先于全局             |
| bgColor        | 背景色                 | 0x222222                 | 单条优先于全局             |
| bgAlpha        | 背景透明度             | 0.8                      | 单条优先于全局             |
| borderColor    | 边框颜色               | 0x000000                 | 单条优先于全局             |
| borderWidth    | 边框宽度               | 2                        | 单条优先于全局             |
| borderAlpha    | 边框透明度             | 1                        | 单条优先于全局             |
| iconSize       | 图标大小               | 32                       | 单条优先于全局             |
| align          | 对齐方式               | 'left'|'center'|'right'  | 单条优先于全局             |
| padding        | 内边距                 | {左:16,右:16,上:10,下:10}| 单条优先于全局             |
| moveY          | 向上移动距离           | 100                      | 单条优先于全局             |
| duration       | 动画时长（毫秒）       | 1500                     | 单条优先于全局             |
| interval       | 与下一条的间隔         | 10                       | 单条优先于全局             |

---

## 4. 用法示例

### 4.1 基本用法

```js
const tips = new 小提示();
app.stage.addChild(tips.容器);

tips.添加({ text: '保存成功！' });
tips.添加({ text: '警告：操作频繁', color: 0xff9900, icon: 'img/warn.png' });
```

### 4.2 设置全局样式和行为

```js
tips.设置起点(400, 300);
tips.设置向上距离(120);
tips.设置动画时长(2000);
tips.设置间隔(16);
tips.设置对齐方式('center');
tips.设置内边距({左:20, 右:20, 上:12, 下:12});
tips.选项.背景颜色 = 0x333366;
tips.选项.边框颜色 = 0x00ffff;
tips.选项.字体 = '微软雅黑';
tips.选项.字号 = 22;
```

### 4.3 单条自定义样式

```js
tips.添加({
    text: '自定义样式',
    icon: 'img/info.png',
    color: 0x00ccff,
    fontFamily: 'Impact',
    fontSize: 28,
    bgColor: 0x222222,
    bgAlpha: 0.9,
    borderColor: 0x00ccff,
    borderWidth: 2,
    borderAlpha: 1,
    align: 'right',
    padding: {左:24, 右:24, 上:12, 下:12},
    moveY: 120,
    duration: 1800,
    interval: 12
});
```

---

## 5. 注意事项

- **所有样式参数都可全局设置，也可单条自定义，单条优先级更高。**
- **动画队列无重叠**：每条消息“跑出自身高度+间隔”时，下一条才出现，视觉上不会重叠。
- **对象池自动复用**，性能高效。
- **对齐方式**支持左上、居中、右上，适合不同UI需求。
- **内边距**严格控制内容与边框的距离，视觉美观。
- **清空**方法可立即移除所有提示。

---