Как получить спрайт-события из pixi.js, работающего внутри angular 7 - PullRequest
Новая
       13

Как получить спрайт-события из pixi.js, работающего внутри angular 7

0 голосов
/ 23 июня 2019

Я пытаюсь создать простой создатель карт, используя electronic, angular и pixi.js. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь добавить событие, как описано в документации здесь , я не могу получить событие для запуска.

При поиске в Google я смог найти самое близкое, что это , что, по-видимому, указывает на то, что причина, по которой события не инициируются, заключается в том, что они обнаруживаются в zone.js и не передаются. Я попытался найти решение, описанное выше, поместив код, указанный в index.html, в тег сценария, чтобы убедиться, что он запускается до zone.js, но он не работает. Я не уверен, что еще можно попробовать ... Я добавил свой полный компонент ниже, а также описания объектов данных.

карта-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);
  }
}

карта-view.component.html 

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

WorldMap Inerface 

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 с тем же эффектом. На данный момент я провел большую часть дня на этом, и я в растерянности.

...