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