Pixi.js阶段父级

Question

我在javascript中有一个图对象。 在此内部，我有一个pixi js阶段作为私有成员。 在该阶段中，我有一个PIXI.Graphics()对象，其中将保留两条垂直线。 我在graph对象中有一些方法，可以根据点击操作这些方法。

问题是：我定的阶段是互动的，然后我设置stage.mousedown事件是一个函数，但是在此功能，我this是舞台，而不是我的图形对象。 我尝试访问父级，但它为null。 在尝试执行mousdown操作之前，我尝试通过以下方式设置父项：

this.stage.parent = this;
this.stage.mousedown = function(mouseData) {...}

但随后mousedown操作永远不会被击中。 有任何想法吗？

Answer 1

您需要在创建了mousedown函数的范围内创建一个变量。JS函数会自动知道其父范围内的变量。 这可能是对父对象作用域或您要调用的函数的引用。

function PixiObject() {

  var stage, 
      renderer;

  this.init = function() {
    stage = new PIXI.Stage(0x000000, true);
    renderer = PIXI.autoDetectRenderer(480, 320, null, false);
    document.body.appendChild(renderer.view);

    var onStageDownA = function() {
      console.log('onStageDownA called');
    };
    this.onStageDownB = function() {
      console.log('onStageDownB called');
    };
    var self = this;
    stage.mousedown = stage.touchstart = function() {
      console.log(this); // stage
      console.log(self); // pixi object
      onStageDownA(); // calls function
      self.onStageDownB(); // calls function
    };

    update();
  }

  function update() {
    requestAnimFrame(update);
    renderer.render(stage);
  }
}

window.onload = function() {
    var p = new PixiObject();
    p.init();
};

这是一个工作示例：

http://codepen.io/ianmcgregor/pen/eFEJv