From 2a78ab36fa70a5280d7ec9fa6e83446cda0a20be Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 01 三月 2024 09:21:38 +0800 Subject: [PATCH] # --- zy-asrs-flow/src/pages/map/index.jsx | 34 +++++++++++++++++++++------------- 1 files changed, 21 insertions(+), 13 deletions(-) diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx index 8883d9c..30e80cd 100644 --- a/zy-asrs-flow/src/pages/map/index.jsx +++ b/zy-asrs-flow/src/pages/map/index.jsx @@ -9,7 +9,7 @@ const useStyles = createStyles(({ token }) => { return { layout: { - overflow: 'hidden', + // overflow: 'hidden', }, header: { textAlign: 'center', @@ -30,9 +30,9 @@ const Map = () => { const { initialState, setInitialState } = useModel('@@initialState'); const { styles } = useStyles(); - const mapRef = React.useRef(); const contentRef = React.useRef(); + const [app, setApp] = React.useState(() => { return new PIXI.Application({ background: '#10ac84', @@ -40,26 +40,34 @@ }) }) + const [windowSize, setWindowSize] = React.useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + React.useEffect(() => { - // resize - const onResize = () => { - if (mapRef) { - const width = contentRef.current.offsetWidth; - const height = contentRef.current.offsetHeight; - app.renderer.resize(width, height); - } - } - window.addEventListener('resize', onResize); - onResize(); + const handleResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + window.addEventListener('resize', handleResize); // app init app.stage.interactive = true; app.stage.hitArea = app.screen; globalThis.__PIXI_APP__ = app; mapRef.current.appendChild(app.view); - }, []); + React.useEffect(() => { + const width = contentRef.current.offsetWidth; + const height = contentRef.current.offsetHeight; + app.renderer.resize(width, height); + + }, [windowSize]); + return ( <> <Layout className={styles.layout}> -- Gitblit v1.9.1