#

luxiaotao1123

2024-10-08 158bca3bcaa70bd805636ecbf3f8290dcc211201

#

 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%',
                    }} />

 zy-acs-flow/src/map/player.js

@@ -23,11 +23,13 @@
        });
    }

    resize() {
        console.log(1);

        // 如果需要在窗口大小改变时调整内容，可以在这里处理
        // 由于设置了 resizeTo，PIXI.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;