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