From 1357573c2574aeb629f66b20ad87676351405f0b Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 08 十月 2024 13:05:29 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/player.js | 21 ++++++---- zy-acs-flow/src/map/MapPage.jsx | 57 ++++++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 12 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index b632f62..6005182 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useRef, useEffect, useMemo } from "react"; import { TextField, Select, @@ -16,9 +16,54 @@ Print as PrintIcon, Share as ShareIcon, } from '@mui/icons-material'; +import Player from './player'; -function MapPage() { - const [mode, setMode] = React.useState('monitoring'); +let player; + +const MapPage = () => { + const mapRef = useRef(); + const contentRef = useRef(); + const [app, setApp] = useState(null); + const [mapContainer, setMapContainer] = React.useState(null); + const [windowSize, setWindowSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + const [mode, setMode] = useState('monitoring'); + + useEffect(() => { + const initialize = async () => { + player = new Player(mapRef.current); + setApp(player.app); + setMapContainer(player.mapContainer); + + const handleResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + window.addEventListener('resize', handleResize); + + } + + initialize(); + return () => { + player.app.destroy(true, { children: true }); + }; + }, []) + + // resize + React.useEffect(() => { + if (!app) { + return; + } + console.log(1); + + const width = contentRef.current.offsetWidth; + const height = contentRef.current.offsetHeight; + app.renderer.resize(width, height); + }, [app, mapContainer, windowSize]) const handleModeChange = (event) => { setMode(event.target.value); @@ -97,12 +142,16 @@ }} > <Box + ref={contentRef} sx={{ width: '100%', height: '100%', backgroundColor: '#e0e0e0', }} - /> + > + <div ref={mapRef} /> + </Box> + <SpeedDial ariaLabel="SpeedDial 绀轰緥" sx={{ position: 'absolute', bottom: 16, right: 16 }} diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js index c8fa3af..3e33579 100644 --- a/zy-acs-flow/src/map/player.js +++ b/zy-acs-flow/src/map/player.js @@ -4,10 +4,10 @@ export default class Player { constructor(dom) { - // init this.app = new PIXI.Application({ background: '#f1f2f6', antialias: true, + // resizeTo: dom, // 鑷姩璋冩暣 canvas 灏哄 }) this.app.stage.eventMode = 'static'; this.app.stage.hitArea = this.app.screen; @@ -17,25 +17,30 @@ dom.appendChild(this.app.view); globalThis.__PIXI_APP__ = this.app; - // create a new Sprite from an image path + + this.mapContainer = generateMapContainer('mapContainer'); + const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); - // center the sprite's anchor point bunny.anchor.set(0.5); - // move the sprite to the center of the screen bunny.x = this.app.screen.width / 2; bunny.y = this.app.screen.height / 2; this.app.stage.addChild(bunny); - // Listen for animate update this.app.ticker.add((delta) => { - // just for fun, let's rotate mr rabbit a little - // delta is 1 if running at 100% performance - // creates frame-independent transformation bunny.rotation += 0.1 * delta; }); } + +} + +const generateMapContainer = (name) => { + const mapContainer = new PIXI.Container(); + mapContainer.sortableChildren = true; + mapContainer.name = name; + mapContainer.data = {}; + return mapContainer; } \ No newline at end of file -- Gitblit v1.9.1