在容器中关联精灵 - Pixi.js

Associating sprites in a container - Pixi.js

本文关键字：Pixi js 精灵 关联      更新时间：2023-09-26

假设我有 2 个看起来相似的类：

//one class
    function classA() {
    var texture = PIXI.Texture.fromImage("someImage");
    PIXI.extras.TilingSprite.call(this, texture, 224, 219);
    this.position.x = 0;
    this.position.y = 0;
    this.tilePosition.x = 0;
    this.tilePosition.y = 0;
    }
    classA.constructor = classA;
    classA.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
//another class
    function classB() {
    var texture = PIXI.Texture.fromImage("anotherImage");
    PIXI.extras.TilingSprite.call(this, texture, 36, 42);
    this.position.x = 0;
    this.position.y = 0;
    this.tilePosition.x = 0;
    this.tilePosition.y = 0;
    }
    classB.constructor = classB;
    classB.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

在另一个文件中，我创建了 1 个类 A 实例和类 B 的 3 个实例，并将它们全部添加到一个容器中：

container = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(224, 219, {view:document.getElementById("some-canvas")});
a = new classA();
container.addChild(a);
b1 = new classB();
container.addChild(b1);
b2 = new classB();
container.addChild(b2);
b3 = new classB();
container.addChild(b3);

我想以某种方式将类 B 关联到类 A，这样我就不需要在每次创建 3 个类 A 实例时创建 1 个类 B 实例（换句话说，我想为每个类实例化执行一个 addChild（） 函数）。这可能吗？

只是想确保我了解您要实现的目标。你基本上想把container.addChild函数切换为在构造函数中完成，而不是在下一行？

首先，我建议不要这样做。根据我的编码经验，我建议不要将任何实际功能放在构造函数中。通常构造函数应该只是为了正确设置基本变量和环境（就像你现在所做的那样）。因为当你走这条路时，你可以向构造函数添加各种各样的东西，但它对于代码结构来说不是最好的。如果你在构造函数中有多个事情需要处理，你可以将它们分成一些.init函数左右。但这只是我对代码组织的看法和经验。

如果我没记错构造函数中的"this"引用，你应该能够像这样做：

addChildFunction = container.addChild.bind(container);
var a = new classA(addChildFunction);
var a2 = new classA(addChildFunction);

只需让构造函数接收函数作为参数：

function classA(addChild) {
    var texture = PIXI.Texture.fromImage("someImage");
    PIXI.extras.TilingSprite.call(this, texture, 224, 219);
    this.position.x = 0;
    this.position.y = 0;
    this.tilePosition.x = 0;
    this.tilePosition.y = 0;
    addChild(this);
}

为什么我建议使用 .bind，是因为如果将来容器对象发生变化，它应该为您提供更大的灵活性。如果传递构造函数容器对象，则容器现在和将来必须始终具有 .addChild 方法（如果某些内容发生更改）。当然，您也可以只向构造函数传递容器对象，但如果将来容器对象发生更改，则必须确保构造函数正确处理它。

相关文章：