From 44846b0e5414034a1cdfed9651f9527a76b4e602 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 08 十月 2024 14:44:04 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/MapPage.jsx | 52 +++++++++++++++++++++++++++------------------------- 1 files changed, 27 insertions(+), 25 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index 1638915..92bb96e 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -23,7 +23,7 @@ const MapPage = () => { const mapRef = useRef(); - + const contentRef = React.useRef(); const [app, setApp] = useState(null); const [mapContainer, setMapContainer] = React.useState(null); @@ -39,40 +39,35 @@ parentElement.style.paddingRight = '0px'; } + const initialize = async () => { + player = new Player(mapRef.current, themeMode); + setApp(player.app); + setMapContainer(player.mapContainer); - // const initialize = async () => { - // player = new Player(mapRef.current, themeMode); - // setApp(player.app); - // setMapContainer(player.mapContainer); + } + initialize(); + // resize + const handleResize = () => { + const width = contentRef.current.offsetWidth; + const height = contentRef.current.offsetHeight; + player.resize(width, height); + }; + handleResize(); + window.addEventListener('resize', handleResize); - // } - // initialize(); - - // // resize - // const handleResize = () => { - // player.resize(); - // }; - // window.addEventListener('resize', handleResize); - // handleResize(); - - - // return () => { - // player.destroy(); - // window.removeEventListener('resize', handleResize); - // }; return () => { - // 閿�姣� Pixi.js 搴旂敤 - // ... + player.destroy(); + window.removeEventListener('resize', handleResize); - // 鎭㈠鐖跺鍣ㄧ殑鍐呰竟璺� if (parentElement && parentElement.classList.contains('RaLayout-content')) { parentElement.style.paddingLeft = ''; parentElement.style.paddingRight = ''; } }; }, [themeMode]) + const handleModeChange = (event) => { setMode(event.target.value); @@ -147,17 +142,24 @@ flexGrow: 1, // fill remaining of map space position: 'relative', backgroundColor: '#fff', - }} > <Box - ref={mapRef} + 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%', + }} /> </Box> <SpeedDial -- Gitblit v1.9.1