mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-31 12:12:58 +08:00
120 lines
3.2 KiB
Markdown
120 lines
3.2 KiB
Markdown
# Thumbnail 地图缩略图组件 API 文档
|
||
|
||
本文档由 `DeepSeek` 生成并微调。
|
||
|
||
## 组件描述
|
||
|
||
地图缩略图组件用于在游戏界面中显示当前楼层的迷你地图，可展示地图布局、角色位置、伤害区域等信息。适用于小地图显示、地图预览等场景。
|
||
|
||
---
|
||
|
||
## Props 属性说明
|
||
|
||
| 属性名 | 类型 | 默认值 | 描述 |
|
||
| ---------- | ---------------- | ------ | -------------------------------------- |
|
||
| `loc` | `ElementLocator` | 必填 | 缩略图的位置和尺寸 |
|
||
| `floorId` | `FloorIds` | 必填 | 楼层 ID |
|
||
| `padStyle` | `CanvasStyle` | - | 缩略图填充样式 |
|
||
| `map` | `Block[]` | - | 楼层信息 |
|
||
| `hero` | `HeroStatus` | - | 角色信息 |
|
||
| `damage` | `boolean` | - | 是否显示地图伤害 |
|
||
| `all` | `boolean` | - | 是否完全展示地图（false 时只显示部分） |
|
||
| `noHD` | `boolean` | - | 是否使用高清模式 |
|
||
| `size` | `number` | - | 缩略图的比例（1 表示与实际地图一致） |
|
||
|
||
---
|
||
|
||
## Events 事件说明
|
||
|
||
无事件
|
||
|
||
---
|
||
|
||
## Slots 插槽说明
|
||
|
||
无插槽
|
||
|
||
---
|
||
|
||
## Exposed Methods 暴露方法
|
||
|
||
无暴露方法
|
||
|
||
---
|
||
|
||
## 使用示例
|
||
|
||
### 基础用法 - 显示当前楼层缩略图
|
||
|
||
```tsx
|
||
import { defineComponent } from 'vue';
|
||
import { Thumbnail } from '@user/client-modules';
|
||
|
||
export const MiniMapCom = defineComponent(() => {
|
||
return () => (
|
||
<Thumbnail
|
||
loc={[400, 50, 120, 120, 1, 0]}
|
||
floorId="main_floor"
|
||
padStyle="#2c3e50"
|
||
size={0.1}
|
||
/>
|
||
);
|
||
});
|
||
```
|
||
|
||
### 带角色位置的小地图
|
||
|
||
```tsx
|
||
import { defineComponent } from 'vue';
|
||
import { Thumbnail } from '@user/client-modules';
|
||
|
||
export const GameHUDCom = defineComponent(props => {
|
||
const heroStatus: HeroStatus = {
|
||
// 角色状态信息
|
||
loc: { x: 100, y: 150 }
|
||
// ... 其他角色属性
|
||
};
|
||
|
||
return () => (
|
||
<container loc={[400, 50, 150, 150, 1, 0]}>
|
||
<Thumbnail
|
||
loc={[0, 0, 150, 150, 0.5, 0.5]}
|
||
floorId="dungeon_1"
|
||
hero={heroStatus}
|
||
padStyle="#34495e"
|
||
damage
|
||
size={0.08}
|
||
/>
|
||
<text text="小地图" loc={[0, 0]} />
|
||
</container>
|
||
);
|
||
});
|
||
```
|
||
|
||
### 完整地图预览
|
||
|
||
```tsx
|
||
import { defineComponent } from 'vue';
|
||
import { Thumbnail } from '@user/client-modules';
|
||
|
||
export const MapPreviewCom = defineComponent(() => {
|
||
return () => (
|
||
<Thumbnail
|
||
loc={[240, 240, 300, 300, 0.5, 0.5]}
|
||
floorId="boss_arena"
|
||
all
|
||
padStyle="#1a1a1a"
|
||
size={0.3}
|
||
/>
|
||
);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **楼层标识**: `floorId` 必须与游戏中的楼层标识匹配
|
||
2. **比例控制**: `size` 参数控制缩略图与实际地图的比例关系
|
||
3. **显示范围**: `all` 为 false 时，大地图只会显示当前可视区域
|