| | |
| | | this.showCoordinates(); |
| | | this.startupTicker(); |
| | | |
| | | const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); |
| | | bunny.anchor.set(0.5); |
| | | bunny.x = 500; |
| | | bunny.y = 400; |
| | | this.mapContainer.addChild(bunny); |
| | | this.app.ticker.add((delta) => { |
| | | bunny.rotation += 0.1 * delta; |
| | | }); |
| | | // const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); |
| | | // bunny.anchor.set(0.5); |
| | | // bunny.x = 500; |
| | | // bunny.y = 400; |
| | | // this.mapContainer.addChild(bunny); |
| | | // this.app.ticker.add((delta) => { |
| | | // bunny.rotation += 0.1 * delta; |
| | | // }); |
| | | |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | 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, |
| | | }) |