Question

我正在尝试使用电子，角度和pixi.js构建一个简单的地图制作器。我遇到的问题是，当我尝试按文档here中所述添加事件时，无法触发该事件。

在谷歌上搜索我能找到的最接近的东西是this，这似乎表明事件未触发的原因是它们被zone.js拾取并没有传递。我尝试通过将index.html中提供的代码放在脚本标签中以确保其在zone.js之前运行但未起作用的方法来尝试解决该问题。我不确定还有什么尝试...我在下面附加了完整的组件以及对数据对象的描述。

map-view.component.ts

import {AfterViewChecked, Component, ElementRef, HostBinding, Input, OnInit, ViewChild} from '@angular/core';
import {WorldMap} from '../../interfaces/Tables';
import {Application, Sprite, Texture} from 'pixi.js';

@Component({
  selector: 'app-map-view',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.scss']
})
export class MapViewComponent implements OnInit, AfterViewChecked {
  @Input() mapData: WorldMap;
  @ViewChild('wrapper') wrapper: ElementRef;
  public app: Application;
  public map: Sprite;

  @HostBinding('class') classes = 'fill-parent';

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.app = new Application({
      resizeTo: this.wrapper.nativeElement
    });
    this.wrapper.nativeElement.appendChild(this.app.view);
    this.map = new Sprite(Texture.from(this.mapData.img_blob));

    this.map.on('mousedown', this.onDragStart);
    this.map.on('mouseup', this.onDragEnd);
    console.log(this.map);
    this.app.stage.addChild(this.map);
  }

  ngAfterViewChecked(): void {
    this.app.resize();
  }

  public onDragStart(event) {
    console.log(event);
  }

  public onDragEnd(event) {
    console.log(event);
  }
}

map-view.component.html

<div #wrapper class="canvasContainer" id="wrapper" > </div>

worldMap接口

export interface WorldMap {
  id: number;
  name: string;
  offset_x: number;
  offset_y: number;
  img_blob: string;
  ppi: number;
}

传入的世界地图对象（除其他外）包含image_blob，它是用于基础层的base_64编码图像。

现在，我只是想让任何东西都可以在mousedown，mouseup和mousedrag事件上注册。我也尝试过使用pointerdown，pointerup，pointermove事件来达到相同的效果。在这一点上，我已经花了一天的大部分时间，对此感到茫然。

如何从Angular 7内的pixi.js获取Sprite事件

0 个答案: