---
outline: [2, 3]
---

# SpritePanel

- 源文件：`packages/sdk/src/mesh/SpritePanel.ts`
- 文档位置：`packages/docs/api/mesh/SpritePanel.md`

## 接口：`SpritePanelOptions`

- 作用：SpritePanelOptions 的结构定义。

### 字段

| 字段名 | 类型 | 必填 | 作用 |
| --- | --- | --- | --- |
| `text` | `string` | 是 | 用于保存 `text` 对应的数据。 |
| `textColor` | `string` | 否 | 用于保存 `textColor` 对应的数据。 |
| `backgroundColor` | `string` | 否 | 用于保存 `backgroundColor` 对应的数据。 |
| `borderColor` | `string` | 否 | 用于保存 `borderColor` 对应的数据。 |
| `borderWidth` | `number` | 否 | 用于保存 `borderWidth` 对应的数据。 |
| `fontSize` | `number` | 否 | 用于保存 `fontSize` 对应的数据。 |
| `padding` | `number` | 否 | 用于保存 `padding` 对应的数据。 |
| `sizeAttenuation` | `boolean` | 否 | 用于标记 `sizeAttenuation` 的启用状态。 |

## 类：`SpritePanel`

- 作用：精灵面板类 - 显示带背景和边框的文字面板
- 继承/实现：`extends THREE.Sprite`

### 构造函数

#### `new SpritePanel(options: SpritePanelOptions)`

- 作用：创建 SpritePanel 实例。

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `options` | `SpritePanelOptions` | 是 | 当前功能对应的配置项。 |

- 出参：`SpritePanel`
- 返回说明：返回当前类实例。

### 属性

| 属性名 | 可见性 | 类型 | 作用 |
| --- | --- | --- | --- |
| `canvas` | `public` | `HTMLCanvasElement` | 用于保存 `canvas` 对应的数据。 |
| `context` | `public` | `CanvasRenderingContext2D` | 用于保存 `context` 对应的数据。 |
| `options` | `public` | `Required<SpritePanelOptions>` | 用于保存 `options` 对应的数据。 |

### 方法

#### `setText(text: string): void`

- 作用：设置 Text。

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `text` | `string` | 是 | 参数 `text`，类型为 `string`。 |

- 出参：`void`
- 返回说明：无返回值。

#### `dispose(): void`

- 作用：释放资源并销毁当前实例。

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

#### `updateTexture(): void`

- 作用：更新 Texture。

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

## 构造示例

- 来源：`packages/demo/src/disasterFormationPanel/GoldMineScene/HeatDisasterLabelPanel.vue`

```ts
  const viewer = bus.getViewer();

  label = new SpritePanel({
    text: '热害',
    textColor: '#ffffff',
    backgroundColor: '#ff4444',
    borderColor: '#cc0000',
    borderWidth: 4
  });
```

## 函数示例

- 当前 Demo 中没有直接展示 `SpritePanel` 的公开方法调用。

## Demo 参考

### `SpritePanel`

以下示例文件中可以看到该 API 的实际调用方式：

- `packages/demo/src/disasterFormationPanel/GoldMineScene/HeatDisasterLabelPanel.vue`