generated from icrdr/omoolab-project
Add fullscreen minimap context and adjust minimum height in Viewer component
This commit is contained in:
@@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.style.overflow = 'hidden'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 初始化全屏小地图 canvas
|
||||||
|
if (fullscreenMinimapCanvasRef.value) {
|
||||||
|
fullscreenMinimapCtx = fullscreenMinimapCanvasRef.value.getContext('2d')
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
|||||||
Reference in New Issue
Block a user