Add fullscreen minimap context and adjust minimum height in Viewer component

This commit is contained in:
2026-04-22 07:19:55 +08:00
parent b5a4850677
commit 890105302a

View File

@@ -128,6 +128,7 @@ const isFullscreen = ref(false)
// 小地图相关 // 小地图相关
let minimapCtx = null let minimapCtx = null
let fullscreenMinimapCtx = null
let minimapAnimationFrameId = null let minimapAnimationFrameId = null
const minimapStyle = ref({ const minimapStyle = ref({
width: '150px', width: '150px',
@@ -567,7 +568,7 @@ const renderMinimap = () => {
// 根据当前模式选择对应的小地图 canvas 和 ref // 根据当前模式选择对应的小地图 canvas 和 ref
const canvas = isFullscreen.value ? fullscreenMinimapCanvasRef.value : minimapCanvasRef.value const canvas = isFullscreen.value ? fullscreenMinimapCanvasRef.value : minimapCanvasRef.value
const minimap = isFullscreen.value ? fullscreenMinimapRef.value : minimapRef.value const minimap = isFullscreen.value ? fullscreenMinimapRef.value : minimapRef.value
const ctx = minimapCtx const ctx = isFullscreen.value ? fullscreenMinimapCtx : minimapCtx
if (!ctx || !canvas || !minimap) return if (!ctx || !canvas || !minimap) return
@@ -912,14 +913,20 @@ const toggleFullscreen = () => {
fullscreenCtx.setTransform(1, 0, 0, 1, 0, 0) fullscreenCtx.setTransform(1, 0, 0, 1, 0, 0)
fullscreenCtx.scale(dpr, dpr) fullscreenCtx.scale(dpr, dpr)
} }
}
// 初始化全屏小地图 canvas
if (fullscreenMinimapCanvasRef.value) {
fullscreenMinimapCtx = fullscreenMinimapCanvasRef.value.getContext('2d')
}
document.body.style.overflow = 'hidden' document.body.style.overflow = 'hidden'
}
} else { } else {
// 退出全屏:恢复正常模式 // 退出全屏:恢复正常模式
document.body.style.overflow = '' document.body.style.overflow = ''
// 清理全屏 context // 清理全屏 context
fullscreenCtx = null fullscreenCtx = null
fullscreenMinimapCtx = null
} }
// 重新渲染 // 重新渲染
@@ -982,6 +989,7 @@ onUnmounted(() => {
ctx = null ctx = null
fullscreenCtx = null fullscreenCtx = null
minimapCtx = null minimapCtx = null
fullscreenMinimapCtx = null
}) })
</script> </script>
@@ -995,7 +1003,7 @@ onUnmounted(() => {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 400px; min-height: 200px;
overflow: hidden; overflow: hidden;
background: var(--vp-c-bg-soft); background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-border); border: 1px solid var(--vp-c-border);