悬浮导航

src/views/Stage.vue

@@ -79,6 +79,7 @@ if (store.settings.showSkinMesh == null) store.settings.showSkinMesh = false
 if (store.settings.showGrid == null) store.settings.showGrid = true
 
 let app: Application | null = null
+let stageResizeObserver: ResizeObserver | null = null
 let world: Container | null = null
 let originGfx: Graphics | null = null
 let boneFollowTargetGfx: Graphics | null = null
@@ -522,6 +523,11 @@ onMounted(async () => {
   const el = holder.value!
   app = new Application({ width: el.clientWidth || 800, height: el.clientHeight || 600, backgroundAlpha: 0, antialias: true })
   el.appendChild(app.view as unknown as HTMLCanvasElement)
+  stageResizeObserver = new ResizeObserver(() => {
+    if (!app) return
+    app.renderer.resize(Math.max(1, el.clientWidth), Math.max(1, el.clientHeight))
+  })
+  stageResizeObserver.observe(el)
   createLayers()
   watch(() => store.settings.backgroundImageData, (value) => background.syncTexture(value), { immediate: true })
   const textures = await loadDefaultTextures()
@@ -565,6 +571,8 @@ onMounted(async () => {
 onUnmounted(() => {
   window.removeEventListener('beforeunload', onBeforeUnload)
   cancelAnimationFrame(raf)
+  stageResizeObserver?.disconnect()
+  stageResizeObserver = null
   spineRuntime?.destroy()
   spineRuntime = null
   background.destroy()