diff --git a/packages-user/client-modules/src/render/shared.ts b/packages-user/client-modules/src/render/shared.ts index 264dbd4..cda67b3 100644 --- a/packages-user/client-modules/src/render/shared.ts +++ b/packages-user/client-modules/src/render/shared.ts @@ -14,6 +14,10 @@ export const MAP_BLOCK_HEIGHT = 15; export const MAP_WIDTH = CELL_SIZE * MAP_BLOCK_WIDTH; /** 地图像素高度 */ export const MAP_HEIGHT = CELL_SIZE * MAP_BLOCK_HEIGHT; +/** 地图宽度的一半 */ +export const HALF_MAP_WIDTH = MAP_WIDTH / 2; +/** 地图高度的一半 */ +export const HALF_MAP_HEIGHT = MAP_HEIGHT / 2; //#region 状态栏 diff --git a/packages-user/client-modules/src/render/ui/viewmap.tsx b/packages-user/client-modules/src/render/ui/viewmap.tsx index 495e5e4..82a7364 100644 --- a/packages-user/client-modules/src/render/ui/viewmap.tsx +++ b/packages-user/client-modules/src/render/ui/viewmap.tsx @@ -41,7 +41,8 @@ import { useKey } from '../use'; import { ENABLE_RIGHT_STATUS_BAR, FULL_LOC, - HALF_WIDTH, + HALF_MAP_WIDTH, + HALF_STATUS_WIDTH, MAIN_HEIGHT, MAP_HEIGHT, MAP_WIDTH, @@ -70,6 +71,12 @@ export const ViewMap = defineComponent(props => { new LayerGroupAnimate() ]; + const restHeight = STATUS_BAR_HEIGHT - 292; + const col = restHeight / 4; + const loc1: ElementLocator = [HALF_STATUS_WIDTH, col * 1 + 292]; + const loc2: ElementLocator = [HALF_STATUS_WIDTH, col * 2 + 292]; + const loc3: ElementLocator = [HALF_STATUS_WIDTH, col * 3 + 292]; + const rightFont = new Font(Font.defaultFamily, 15); const viewableFloor = markRaw( @@ -213,6 +220,28 @@ export const ViewMap = defineComponent(props => { group.value?.update(); }; + //#region 事件监听 + + const clickTop = (ev: IActionEvent) => { + const col = MAP_WIDTH / 3; + if (ev.offsetX < col * 2) { + changeFloor(1); + } else { + resetCamera(); + } + }; + + const clickBottom = (ev: IActionEvent) => { + const col = MAP_WIDTH / 3; + if (ev.offsetX < col) { + openBook(); + } else if (ev.offsetX < col * 2) { + changeFloor(-1); + } else { + fly(); + } + }; + //#region 地图交互 let mouseDown = false; @@ -394,7 +423,7 @@ export const ViewMap = defineComponent(props => { cursor="pointer" onEnter={enterTop} onLeave={leaveTop} - onClick={() => changeFloor(1)} + onClick={clickTop} /> (props => { cursor="pointer" onEnter={enterBottom} onLeave={leaveBottom} - onClick={() => changeFloor(-1)} + onClick={clickBottom} /> + + +