fix: map location

This commit is contained in:
bridge
2026-01-26 23:22:14 +08:00
parent 84027fc1d7
commit 64783e018f
3 changed files with 16 additions and 1 deletions

View File

@@ -246,6 +246,7 @@ onUnmounted(() => {
</div> </div>
<GameCanvas <GameCanvas
:sidebar-width="sidebarWidth"
@avatarSelected="handleSelection" @avatarSelected="handleSelection"
@regionSelected="handleSelection" @regionSelected="handleSelection"
/> />

View File

@@ -18,6 +18,10 @@ const { loadBaseTextures, isLoaded } = useTextures()
const mapSize = ref({ width: 2000, height: 2000 }) const mapSize = ref({ width: 2000, height: 2000 })
defineProps<{
sidebarWidth?: number
}>()
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'avatarSelected', payload: { type: 'avatar'; id: string; name?: string }): void (e: 'avatarSelected', payload: { type: 'avatar'; id: string; name?: string }): void
(e: 'regionSelected', payload: { type: 'region'; id: string; name?: string }): void (e: 'regionSelected', payload: { type: 'region'; id: string; name?: string }): void
@@ -64,6 +68,7 @@ onMounted(() => {
:screen-height="height" :screen-height="height"
:world-width="mapSize.width" :world-width="mapSize.width"
:world-height="mapSize.height" :world-height="mapSize.height"
:padding-right="sidebarWidth"
> >
<!-- <!--
注意之前使用的 store.worldVersion 已移除 注意之前使用的 store.worldVersion 已移除

View File

@@ -9,6 +9,7 @@ const props = defineProps<{
screenHeight: number screenHeight: number
worldWidth: number worldWidth: number
worldHeight: number worldHeight: number
paddingRight?: number
}>() }>()
const app = useApplication() const app = useApplication()
@@ -51,7 +52,8 @@ function fitMap() {
if (worldWidth < 100) return if (worldWidth < 100) return
// 1. 先计算新的缩放限制 // 1. 先计算新的缩放限制
const fitScale = Math.min(props.screenWidth / worldWidth, props.screenHeight / worldHeight) const availWidth = props.screenWidth - (props.paddingRight || 0)
const fitScale = Math.min(availWidth / worldWidth, props.screenHeight / worldHeight)
// 2. 重要:在 fit() 之前先设置新的 clampZoom或者先暂时移除旧的限制 // 2. 重要:在 fit() 之前先设置新的 clampZoom或者先暂时移除旧的限制
// 这里我们直接设置新的宽松限制 // 这里我们直接设置新的宽松限制
@@ -64,6 +66,13 @@ function fitMap() {
viewport.fit(true, worldWidth, worldHeight) viewport.fit(true, worldWidth, worldHeight)
viewport.moveCenter(worldWidth / 2, worldHeight / 2) viewport.moveCenter(worldWidth / 2, worldHeight / 2)
// 修正偏移:将地图向左平移,以抵消 Sidebar 的占用
// 屏幕中心在 screenWidth/2我们希望视觉中心在 (screenWidth - padding)/2
// 偏移量 = padding / 2
if (props.paddingRight) {
viewport.x -= props.paddingRight / 2
}
// 5. 如果当前缩放比预期的还要大(虽然 fit 应该已经处理了,但双保险),强制设置 // 5. 如果当前缩放比预期的还要大(虽然 fit 应该已经处理了,但双保险),强制设置
if (viewport.scaled > fitScale * 1.1) { // 允许一点误差 if (viewport.scaled > fitScale * 1.1) { // 允许一点误差
viewport.setZoom(fitScale) viewport.setZoom(fitScale)