Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
433 views
in Technique[技术] by (71.8m points)

javascript - Get pixi.js data by canvas element

I have a browser extension that needs to pull some information about associated objects drawn at canvas element using PIXI.js.

Some drawing frameworks store associated objects tree using jQuery data() on dom element. In this case I see it is empty.

PIXI application object is created by an Angular controller and as I can imagine it holds the reference inside.

For example, for this page: https://www.goodboydigital.com/pixijs/examples/13/?base=pixijs&category=examples&post=13
Is there any helper method or any way I can use something like this:

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

and get the objects tree?

question from:https://stackoverflow.com/questions/65919571/get-pixi-js-data-by-canvas-element

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

On this page https://www.goodboydigital.com/pixijs/examples/13/?base=pixijs&category=examples&post=13 it is easy to get all objects that you are interested in because they are global - just see source of that page:

<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);
...

You can try using them via developer tools console (in browser like Firefox or Chrome etc);

For example you can open your devtools and run following line in console:

graphics.position.x+=10;

You should see some objects in canvas moving to right.

Anyway, as i said above: this is the easy case - everything as global variables. When PIXI objects are created inside some other scope (inside some function / class etc) then you will not be able to get them.

About Application: As you see there is no Application here - the "renderer" is used directly - is what you need to render on canvas. Application is just a "helper" object that is not required to work with PIXI - as you my read in its source: 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.
...

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...