信息框详细文档

admin

下面是你当前的 `信息框` (InfoBox) 组件的详细使用文档，涵盖所有主要API、参数、用法和注意事项。

---

# 信息框组件（InfoBox）使用文档

## 简介

信息框（InfoBox）是基于 PixiJS 8.x 的纯展示型文本容器组件，支持 HTML 或纯文本内容，具备丰富的样式和动画能力，适合用于提示、说明、日志等场景。

---

## 1. 初始化

```js
const info = new 信息框();
info.初始化(x, y, width, height, options);
```

- **x, y**：信息框左上角坐标（默认 0, 0）
- **width, height**：初始宽高（可选，省略则自适应内容）
- **options**：可选配置对象，支持以下字段：

| 选项名         | 说明                   | 默认值      |
| -------------- | ---------------------- | ----------- |
| 宽度           | 信息框宽度             | 300         |
| 高度           | 信息框高度             | 150         |
| 自动宽度       | 内容变动时自动扩展宽度 | true        |
| 自动高度       | 内容变动时自动扩展高度 | true        |
| 背景颜色       | 背景色（16进制数）     | 0x1e1e1e    |
| 背景透明度     | 背景透明度 0~1         | 0.8         |
| 边框颜色       | 边框颜色               | 0x555555    |
| 边框透明度     | 边框透明度 0~1         | 1           |
| 边框宽度       | 边框线宽               | 1           |
| 圆角           | 圆角半径               | 4           |
| 字体           | 字体                   | 'Arial'     |
| 字号           | 字号（像素）           | 16          |
| 文字颜色       | 文字颜色               | 0xffffff    |
| 行间距         | 行间距（像素）         | 4           |
| 内边距上/下/左/右 | 内容区内边距         | 8/8/12/12   |
| 动画持续       | 淡入淡出动画时长（ms） | 300         |
| 调试模式       | 控制台输出调试信息     | false       |

---

## 2. 添加到舞台

```js
app.stage.addChild(info.容器);
```
- `info.容器` 是 PixiJS 的 `Container`，可直接 addChild。

---

## 3. 设置内容

### 纯文本

```js
info.设置内容('这是纯文本内容', { 字体: 'Arial', 字号: 14, 文字颜色: 0xff0000 });
```

### HTML 内容

```js
const html = `<b style="color:#00ff99;font-size:12px">InfoBox 组件</b><br/>支持 <i>HTML</i> 内容`;
info.设置内容(html);
```
> **注意：**  
> - HTML 内容的字号、字体需写在标签内的 style 里，PixiJS 的 `HTMLText` 不会自动覆盖标签内样式。
> - 纯文本时，API参数的字号/字体/颜色会生效。

#### 参数说明

- **内容**：字符串，支持 HTML 或纯文本
- **styleOverride**：可选，覆盖字体、字号、颜色等（仅对纯文本或无标签HTML生效）

---

## 4. 设置/调整样式

### 设置背景色

```js
info.设置背景颜色(0x333333, 0.9); // 颜色, 透明度
```

### 设置边框

```js
info.设置边框(0xff0000, 2, 1); // 颜色, 线宽, 透明度
```

### 设置内边距

```js
info.设置内边距({ 上: 10, 下: 10, 左: 20, 右: 20 });
```

### 设置文字样式（全局）

```js
info.设置文字样式({ 字体: '微软雅黑', 字号: 18, 文字颜色: 0x00ccff });
```
> 会自动刷新内容，纯文本和无内联样式HTML有效。

---

## 5. 动画

### 淡入

```js
info.淡入(500); // 可选参数：动画时长（毫秒）
```

### 淡出

```js
info.淡出(500);
```

---

## 6. 关键词高亮

```js
info.高亮关键词(['错误', '警告'], 0xff3300);
```
- 仅对纯文本内容或简单HTML有效。
- 会将所有出现的关键词用 `<span style="color:...">` 包裹。

---

## 7. 复制全部内容

```js
info.复制全部();
```
- 将内容复制到剪贴板（仅支持纯文本）。

---

## 8. 位置和尺寸

```js
info.设置位置(x, y);
info.设置尺寸(width, height);
```
- 设置后会自动刷新布局。

---

## 9. 销毁

```js
info.销毁();
```
- 释放所有 PixiJS 对象和内存。

---

## 10. 其它说明

- **内容自适应**：默认宽高会根据内容自动扩展，若指定宽/高则固定。
- **内容变动后自动刷新布局**，无需手动调用刷新。
- **兼容性**：依赖 PixiJS 8.x，需确保 `PIXI` 全局可用，且支持 `PIXI.HTMLText`。
- **事件**：本组件为纯展示型，不自带交互事件（可自行为 `info.容器` 添加 Pixi 事件）。

---

## 11. 示例

```js
const info = new 信息框().初始化(100, 100, 300);
app.stage.addChild(info.容器);

info.设置内容('欢迎使用 InfoBox 组件！', { 字体: 'Arial', 字号: 16, 文字颜色: 0x00ccff });
info.设置内边距({ 上: 16, 下: 16, 左: 24, 右: 24 });
info.设置背景颜色(0x222222, 0.95);
info.淡入();

setTimeout(() => info.高亮关键词(['InfoBox']), 1000);
setTimeout(() => info.复制全部(), 2000);
```

---

## 12. 常见问题

- **HTML内容字号无效？**  
  请在HTML标签内写 `style="font-size:12px"`，否则会用PixiJS默认字号（28）。
- **内容溢出？**  
  建议开启自动宽高，或设置合适的内边距和 wordWrap。
- **高亮关键词对HTML内容有嵌套问题？**  
  建议高亮前用纯文本，或自行处理HTML。

---

如需更复杂的用法或自动增强功能（如自动为HTML内容加字号），可联系开发者或让AI助手帮你定制！