| | |
| | | } |
| | | |
| | | showCoordinates = () => { |
| | | const coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', { |
| | | fill: this.themeMode === 'dark' ? 0xffffff : 0x000000, |
| | | this.coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', { |
| | | fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333, |
| | | fontSize: 13, |
| | | fontFamily: 'MicrosoftYaHei', |
| | | fontWeight: 'bold', |
| | | }); |
| | | coordinatesText.name = 'xyStr' |
| | | coordinatesText.position.set(10, 10); |
| | | this.app.stage.addChild(coordinatesText); |
| | | this.coordinatesText.name = 'xyStr' |
| | | this.coordinatesText.position.set(10, 10); |
| | | this.app.stage.addChild(this.coordinatesText); |
| | | |
| | | const mouseMoveInfoTextHandler = (event) => { |
| | | const mouseX = (event.clientX - this.mapContainer.position.x) / this.scale; |
| | | const mouseY = (event.clientY - this.mapContainer.position.y) / this.scale; |
| | | coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`; |
| | | this.coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`; |
| | | }; |
| | | this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler); |
| | | } |
| | |
| | | } |
| | | |
| | | setTheme = (themeMode) => { |
| | | this.app.renderer.background.color = themeMode === 'dark' ? 0x2f3542 : 0xf1f2f6; |
| | | this.app.renderer.background.color = themeMode === 'dark' ? '#3a3f44' : '#f1f2f6'; |
| | | if (this.coordinatesText) { |
| | | this.coordinatesText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | const generateApp = (dom, themeMode) => { |
| | | const app = new PIXI.Application({ |
| | | background: themeMode === 'dark' ? '#2f3542' : '#f1f2f6', |
| | | background: themeMode === 'dark' ? '#3b4148' : '#f1f2f6', |
| | | antialias: true, |
| | | // resizeTo: dom, |
| | | }) |