Pixi.js stage parent

Question

I have a graph object in javascript. Inside this I have a pixi js stage as a private member. In the stage I have a PIXI.Graphics() object where I will hold two vertical lines. I have methods in the graph object that manipulate these based on the clicks.

The problem is: I set the stage to be interactive and then I set the stage.mousedown event to be a function, however in this function, my this is the stage and not my Graph object. I tried to access the parent but it is null. I tried to set the parent before creating the mousdown action by doing something like:

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

but then the mousedown action never gets hit. Any ideas?

Answer 1

You'll need to make a variable in the same scope the mousedown function is created in. JS functions automatically know about variables in their parent scope. That could be a reference to the parent object scope or a function you want to call.

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();
};

Here's a working example:

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