| | |
| | | constructor(dom, dark) { |
| | | this.darkModel = dark; |
| | | // init |
| | | this.app = generatePixiApp(); |
| | | this.app = generatePixiApp(dark); |
| | | dom.appendChild(this.app.view); |
| | | |
| | | globalThis.__PIXI_APP__ = this.app; |
| | |
| | | fontFamily: 'MicrosoftYaHei', |
| | | fontWeight: 'bold', |
| | | }); |
| | | coordinatesText.name = 'xyStr' |
| | | coordinatesText.position.set(10, 10); |
| | | this.app.stage.addChild(coordinatesText); |
| | | |
| | |
| | | this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler); |
| | | } |
| | | |
| | | showGridlines = () => { |
| | | if (!this.gridLineContainer) { |
| | | this.gridLineContainer = generatePixiContainer('gridLineContainer'); |
| | | this.app.stage.addChild(this.gridLineContainer); |
| | | } |
| | | |
| | | const inte = 30; |
| | | const lineDefaultAlpha = .5;; |
| | | const lineDefaultColor = 0x000000; |
| | | for (let i = 0; i < this.app.view.width / inte; i++) { |
| | | const graphics = new PIXI.Graphics(); |
| | | graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha); |
| | | graphics.beginFill(lineDefaultColor); |
| | | graphics.moveTo(i * inte, 0); |
| | | graphics.lineTo(i * inte, this.app.view.height); |
| | | graphics.endFill(); |
| | | this.gridLineContainer.addChild(graphics); |
| | | } |
| | | |
| | | for (let i = 0; i < this.app.view.height / inte; i++) { |
| | | const graphics = new PIXI.Graphics(); |
| | | graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha); |
| | | graphics.beginFill(lineDefaultColor); |
| | | graphics.moveTo(0, i * inte); |
| | | graphics.lineTo(this.app.view.width, i * inte); |
| | | graphics.endFill(); |
| | | |
| | | this.gridLineContainer.addChild(graphics); |
| | | } |
| | | } |
| | | |
| | | hideGridlines = () => { |
| | | if (this.gridLineContainer) { |
| | | this.app.stage.removeChild(this.gridLineContainer); |
| | | this.gridLineContainer = null; |
| | | } |
| | | } |
| | | |
| | | appTicker = () => { |
| | | TWEEDLE.Group.shared.update(); |
| | | } |
| | | |
| | | } |
| | | |
| | | function generatePixiApp() { |
| | | function generatePixiApp(dark) { |
| | | const app = new PIXI.Application({ |
| | | background: '#F8FAFB', |
| | | background: dark ? '#f1f2f6' : '#f1f2f6', |
| | | antialias: true, |
| | | }) |
| | | app.stage.eventMode = 'auto'; |