From 7fa2bc657d4f6ff8dcf8ee9b3fa9470485e1a9ac Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期二, 24 二月 2026 13:49:25 +0800
Subject: [PATCH] #
---
src/main/webapp/components/MapCanvas.js | 38 ++++++++++++++++++++++++++++++++------
1 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/src/main/webapp/components/MapCanvas.js b/src/main/webapp/components/MapCanvas.js
index 3147540..795f549 100644
--- a/src/main/webapp/components/MapCanvas.js
+++ b/src/main/webapp/components/MapCanvas.js
@@ -1,7 +1,7 @@
Vue.component('map-canvas', {
template: `
<div style="width: 100%; height: 100%; position: relative;">
- <div ref="pixiView"></div>
+ <div ref="pixiView" style="position: absolute; inset: 0;"></div>
<div v-show="shelfTooltip.visible"
:style="shelfTooltipStyle()">
{{ shelfTooltip.text }}
@@ -80,6 +80,7 @@
item: null
},
shelfTooltipMinScale: 0.4,
+ containerResizeObserver: null,
timer: null,
adjustLabelTimer: null,
isSwitchingFloor: false
@@ -88,6 +89,7 @@
mounted() {
this.currentLev = this.lev || 1;
this.createMap();
+ this.startContainerResizeObserve();
this.loadMapTransformConfig();
this.loadLocList();
this.connectWs();
@@ -108,6 +110,7 @@
if (this.hoverRaf) { cancelAnimationFrame(this.hoverRaf); this.hoverRaf = null; }
if (this.pixiApp) { this.pixiApp.destroy(true, { children: true }); }
+ if (this.containerResizeObserver) { this.containerResizeObserver.disconnect(); this.containerResizeObserver = null; }
window.removeEventListener('resize', this.resizeToContainer);
if (this.wsReconnectTimer) { clearTimeout(this.wsReconnectTimer); this.wsReconnectTimer = null; }
if (this.ws && (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING)) { try { this.ws.close(); } catch (e) {} }
@@ -277,11 +280,33 @@
});
//*******************FPS*******************
},
+ startContainerResizeObserve() {
+ if (typeof ResizeObserver === 'undefined' || !this.$el) { return; }
+ this.containerResizeObserver = new ResizeObserver(() => {
+ this.resizeToContainer();
+ });
+ this.containerResizeObserver.observe(this.$el);
+ },
+ getViewportSize() {
+ if (!this.pixiApp || !this.pixiApp.renderer) { return { width: 0, height: 0 }; }
+ const screen = this.pixiApp.renderer.screen;
+ if (screen && screen.width > 0 && screen.height > 0) {
+ return { width: screen.width, height: screen.height };
+ }
+ const rect = this.pixiApp.view ? this.pixiApp.view.getBoundingClientRect() : null;
+ return { width: rect ? rect.width : 0, height: rect ? rect.height : 0 };
+ },
resizeToContainer() {
const w = this.$el.clientWidth || 0;
const h = this.$el.clientHeight || 0;
if (w > 0 && h > 0 && this.pixiApp) {
+ const vw = this.pixiApp.renderer && this.pixiApp.renderer.screen ? this.pixiApp.renderer.screen.width : 0;
+ const vh = this.pixiApp.renderer && this.pixiApp.renderer.screen ? this.pixiApp.renderer.screen.height : 0;
+ if (vw === w && vh === h) { return; }
this.pixiApp.renderer.resize(w, h);
+ if (this.mapContentSize && this.mapContentSize.width > 0 && this.mapContentSize.height > 0) {
+ this.applyMapTransform(true);
+ }
}
},
getMap() {
@@ -1642,8 +1667,9 @@
adjustLabelScale() {
const s = this.pixiApp && this.pixiApp.stage ? Math.abs(this.pixiApp.stage.scale.x || 1) : 1;
const minPx = 14;
- const vw = this.pixiApp.view.width;
- const vh = this.pixiApp.view.height;
+ const viewport = this.getViewportSize();
+ const vw = viewport.width;
+ const vh = viewport.height;
const margin = 50;
const mirrorSign = this.mapMirrorX ? -1 : 1;
const inverseRotation = -((this.mapRotation % 360) * Math.PI / 180);
@@ -1821,8 +1847,9 @@
const contentW = size.width || 0;
const contentH = size.height || 0;
if (contentW <= 0 || contentH <= 0) { return; }
- const vw = this.pixiApp.view.width;
- const vh = this.pixiApp.view.height;
+ const viewport = this.getViewportSize();
+ const vw = viewport.width;
+ const vh = viewport.height;
let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
if (!isFinite(scale) || scale <= 0) { scale = 1; }
const baseW = this.mapContentSize.width || contentW;
@@ -1856,7 +1883,6 @@
}
}
});
-
--
Gitblit v1.9.1