通过 canvas 元素获取 pixi.js 数据

Question

我有一个浏览器扩展程序，它需要使用 PIXI.js 提取有关在 canvas 元素上绘制的关联对象的一些信息。

一些绘图框架使用 dom 元素上的 jQuery data() 存储关联的对象树。在这种情况下，我看到它是空的。

PIXI 应用程序对象是由 Angular 控制器创建的，正如我想象的那样，它在内部包含引用。

例如，对于此页面：https://www.goodboydigital.com/pixijs/examples/13/?base=pixijs&category=examples&post=13
有没有任何辅助方法或任何方式我可以使用这样的东西：

new PIXI.Application(document.getElementsByTagName('canvas')[0])

并获取对象树？

Answer 1

在此页面上 https://www.goodboydigital.com/pixijs/examples/13/?base=pixijs&category=examples&post=13 很容易获得您感兴趣的所有对象，因为它们是全局的 - 只需查看该页面的源代码：

<body>
    <script>
    

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);
    
    stage.setInteractive(true);
    
    var sprite=  PIXI.Sprite.fromImage("spinObj_02.png");
    //stage.addChild(sprite);
    // create a renderer instance
    //var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
    var renderer = PIXI.autoDetectRenderer(620, 380);
    
    // set the canvas width and height to fill the screen
    //renderer.view.style.width = window.innerWidth + "px";
    //renderer.view.style.height = window.innerHeight + "px";
    renderer.view.style.display = "block";
     
    // add render view to DOM
    document.body.appendChild(renderer.view);

...


        renderer.render(stage);
...

您可以尝试通过开发者工具控制台（在 Firefox 或 Chrome 等浏览器中）使用它们；

例如，您可以打开您的开发工具并运行控制台中的以下行：

graphics.position.x+=10;

您应该会看到 canvas 中的一些对象向右移动。

无论如何，正如我上面所说：这是简单的情况 - 一切都是全局变量。当 PIXI 对象是在其他范围内（在某些函数/class 等内）创建时，您将无法获取它们。

关于Application：如您所见，这里没有Application——直接使用“渲染器”——是你需要在canvas上渲染的。 Application 只是一个不需要与 PIXI 一起工作的“助手”对象 - 正如我在其源代码中所读：https://github.com/pixijs/pixi.js/blob/v5.3.7/packages/app/src/Application.ts.

/**
 * Convenience class to create a new PIXI application.
 *
 * This class automatically creates the renderer, ticker and root container.
...

通过 canvas 元素获取 pixi.js 数据

Get pixi.js data by canvas element

javascript

pixi.js