pixjs：在精灵中创建自定义事件并在另一个精灵中监听答案

【问题标题】：pixijs: create custom event in sprite and listen in another spritepixjs：在精灵中创建自定义事件并在另一个精灵中监听
【发布时间】：2021-03-07 17:03:43
【问题描述】：

我有两个自定义 Sprite（在我的例子中是 Sprite，另一个是 Container，但这没关系）。我需要在一个精灵中发出事件并在另一个精灵中收听它（MyDragableElement）。在应用程序中，我有很多MyDraableElements: PIXI.Sprite。这个想法是第二个精灵将能够在MyDragableElement 上进行操作，但它应该知道选择了哪个元素。我认为事件可以在这里提供帮助，但是应该如何用 Typescript 编写呢？

export class MyDragableElement extends PIXI.Sprite {
    constructor(

     super();

        this
        .on('pointerdown', this.onDragStart)
        .on('pointerup', this.onDragEnd)
        .on('pointerupoutside', this.onDragEnd)
        .on('pointermove', this.onDragMove);
    }

    private onDragStart(event) {
        this.emit('selectedElementChanged', this);
    }
}

所以你看到这是一些精灵，在拖动开始时，它应该发出全局事件。

这是另一个 Sprite，它应该监听这个事件。

export class Toolbar extends PIXI.Container {
    selectedGameObject: any;

    constructor()
    {
        super();
        this.addListener("selectedElementChanged", 
                (e:any) =>  { 
                    // this.selectedGameObject = need to select this element
                    console.log(e); 
                });
        }
     }
  }

以上是我的想法，但它不起作用。没有 Emitting 事件的经验。

【问题讨论】：

标签： events pixi.js

【解决方案1】：

我刚学了这个话题，可能是错的，但是...

如果你有一些精灵

let mySprite = new Sprite(someTexture);

...您可以在代码中的某处编写下一个：

mySprite.emit('customEvent', {myData: 'somedata'});

你还需要在你的精灵上为这个 customEvent 设置事件处理程序：

mySprite.on('customEvent', onCustomEvent);

let onCustomEvent = (event) => {
    console.log(event);
};

【讨论】：