Pixi.js 阶段父级

【问题标题】：Pixi.js stage parentPixi.js 阶段父级
【发布时间】：2023-04-02 15:39:01
【问题描述】：

我在 javascript 中有一个图形对象。在这里面，我有一个 pixi js 舞台作为私人成员。在舞台上，我有一个PIXI.Graphics() 对象，我将在其中放置两条垂直线。我在图形对象中有一些方法可以根据点击操作这些方法。

问题是：我将舞台设置为交互式，然后将 stage.mousedown 事件设置为一个函数，但是在这个函数中，我的 this 是舞台而不是我的 Graph 对象。我试图访问父级，但它为空。我尝试通过执行以下操作在创建 mousdown 操作之前设置父级：

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

但是mousedown 动作永远不会被击中。有什么想法吗？

【问题讨论】：

标签： javascript pixi.js

【解决方案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

【讨论】：