如何通过Canvas元素获取PIXI.js绘制的关联对象树

首先明确：直接执行new PIXI.Application(document.getElementsByTagName('canvas')[0])的方式完全无法拿到原场景的对象树。这个操作会为当前Canvas重新初始化一套独立的PIXI渲染上下文，和页面原本运行的PIXI实例没有任何关联，甚至会覆盖原Canvas的渲染上下文，破坏页面原有渲染状态。
你之前尝试通过jQuery data()方法读取关联对象为空是正常现象，因为绝大多数PIXI的集成方案不会把应用实例存到jQuery的DOM数据缓存中。

可落地的实现路径 #

• 利用PIXI在Canvas元素上挂载的内部属性定位渲染器
  主流版本（v3到v7）的PIXI初始化时，会将渲染器实例直接挂载到对应Canvas DOM元素的自定义属性上，通过这个属性可以直接拿到渲染器引用，进而访问渲染器绑定的stage根节点，遍历得到完整显示对象树。
  对应实现代码：

  const targetCanvas = document.getElementsByTagName('canvas')[0];
  // 兼容不同版本的PIXI内部属性名
  const renderer = targetCanvas.__PIXI_RENDERER__ || targetCanvas.__pixiRenderer;
  if (renderer?.stage) {
    // renderer.stage即为场景根节点，可递归遍历拿到完整对象树
    const rootStage = renderer.stage;
  }
  

• 从Angular作用域中抓取PIXI应用引用
  由于当前场景下PIXI.Application是由Angular控制器创建的，实例本身大概率挂在控制器的作用域上：
  • 对AngularJS 1.x项目，可以通过angular.element(targetCanvas).scope()拿到对应绑定的控制器作用域，遍历作用域下所有属性，匹配带有PIXI.Application特征的实例
  • 对Angular 2+项目，可以从全局的组件实例追踪集合中，匹配持有PIXI.Application引用的控制器/组件实例
• 全局对象遍历兜底
  针对站点隐藏PIXI内部属性、未将实例挂到全局作用域的场景，可以从window对象出发，遍历所有可访问的JS对象，匹配带有ticker、renderer、stage三个PIXI.Application标志性属性的对象，再校验该对象的渲染器绑定的Canvas是否为目标Canvas，即可定位到对应的应用实例。

常见坑点 #

• 不要重复初始化PIXI.Application绑定已有Canvas，不仅拿不到原有对象树，还会直接清空Canvas上的已有渲染内容
• 部分站点会通过Proxy隐藏PIXI的内部实例属性，这种场景下优先使用Angular作用域匹配的方案，稳定性更高

内容的提问来源于stack exchange，提问作者Dmitry Krotov