From 158bca3bcaa70bd805636ecbf3f8290dcc211201 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 08 十月 2024 14:42:37 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/player.js   |   14 ++++++++------
 zy-acs-flow/src/map/MapPage.jsx |   21 ++++++++++-----------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 3fd2412..5f832d5 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -29,11 +29,6 @@
 
     const [mode, setMode] = useState('monitoring');
 
-    const [windowSize, setWindowSize] = React.useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    });
-
     const theme = useTheme();
     const themeMode = theme.palette.mode;
 
@@ -52,13 +47,12 @@
         }
         initialize();
 
-        // windows resize
+        // resize
         const handleResize = () => {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-            player.resize();
+            const width = contentRef.current.offsetWidth;
+            const height = contentRef.current.offsetHeight;
+
+            player.resize(width, height);
         };
         window.addEventListener('resize', handleResize);
 
@@ -72,6 +66,7 @@
             }
         };
     }, [themeMode])
+
 
     const handleModeChange = (event) => {
         setMode(event.target.value);
@@ -151,12 +146,16 @@
                 <Box
                     ref={contentRef}
                     sx={{
+                        position: 'relative',
                         width: '100%',
                         height: '100%',
                         backgroundColor: '#e0e0e0',
                     }}
                 >
                     <div ref={mapRef} style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
                         width: '100%',
                         height: '100%',
                     }} />
diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js
index 51bd99a..62a8179 100644
--- a/zy-acs-flow/src/map/player.js
+++ b/zy-acs-flow/src/map/player.js
@@ -23,11 +23,13 @@
         });
     }
 
-    resize() {
-        console.log(1);
-
-        // 濡傛灉闇�瑕佸湪绐楀彛澶у皬鏀瑰彉鏃惰皟鏁村唴瀹癸紝鍙互鍦ㄨ繖閲屽鐞�
-        // 鐢变簬璁剧疆浜� resizeTo锛孭IXI.Application 浼氳嚜鍔ㄨ皟鏁寸敾甯冨昂瀵�
+    resize(width, height) {
+        console.log(width, height);
+        this.app.renderer.resize(width, height);
+        this.mapContainer.children.forEach((child) => {
+            child.x = width / 2;
+            child.y = height / 2;
+        });
     }
 
     destroy() {
@@ -40,7 +42,7 @@
     const app = new PIXI.Application({
         background: themeMode === 'dark' ? '#2f3542' : '#f1f2f6',
         antialias: true,
-        resizeTo: dom,
+        // resizeTo: dom,
     })
     app.stage.eventMode = 'static';
     app.stage.hitArea = app.screen;

--
Gitblit v1.9.1