Question

I have this stage associated to a container:

html:

<div id="container">

script 1:

var stageInFirstScript = new Kinetic.Stage({
    container: document.getElementById('container'),
    width: this.SKETCH_WIDTH,
    height: this.SKETCH_HEIGTH
});

In a second script, I need to manipulate the shapes on the stage I just created. Is it possible to retrieve stageInFirstScript with something like this?

script 2:

var stageInSecondScript = document.getElementById('container').RetrieveExistingStage();
//now I have retrieved stageInFirstScript
//I can add shapes to it, etc....

Any help or alternative solution would be appreciated!

Answer 1

You should be able to simply reference the variable you’ve created, that is “stageInFirstScript”. But if the two scripts are within two separate scopes, try making this variable global and then access it like one, like this (I’ll use jquery for this example):

Script1.js:

var stageInFirstScript; // declaring global variable

$(window).load(function() {

   // assigning new stage to the global variable

   stageInFirstScript = new Kinetic.Stage({
       container: document.getElementById('container'),
       width: this.SKETCH_WIDTH,
       height: this.SKETCH_HEIGTH
   });

});

And then in script2.js:

function doSomething() {

    // accessing global variable and calling its method

    stageInFirstScript.setHeight(300); 

}

This should work as long as the function is called after the variable has been defined, in this case after the window has been loaded.

If you’re looking to get the stage of any container, one of the ways I can think of is to create an array associating kinetic stages with containers (or their ids for example).