HumanBreak/docs/api/user-client-modules/组件 Thumbnail.md

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 暴露方法

无暴露方法

---

使用示例

基础用法 - 显示当前楼层缩略图

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}
        />
    );
});

带角色位置的小地图

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>
    );
});

完整地图预览

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 时，大地图只会显示当前可视区域