javascript - 从 kineticjs 中的容器获取舞台

Question

我将这个阶段关联到一个容器:

html:

<div id="container">

脚本 1:

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

在第二个脚本中，我需要在刚刚创建的舞台上操纵形状。是否可以用这样的方式检索 stageInFirstScript？

脚本 2:

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

任何帮助或替代解决方案将不胜感激!

Answer 1

您应该能够简单地引用您创建的变量，即“stageInFirstScript”。但是，如果这两个脚本在两个不同的范围内，请尝试将此变量设为全局变量，然后像这样访问它(我将在本示例中使用 jquery):

脚本 1.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
   });

});

然后在 script2.js 中:

function doSomething() {

    // accessing global variable and calling its method

    stageInFirstScript.setHeight(300); 

}

只要在定义变量之后调用该函数，这应该就可以工作，在本例中是在加载窗口之后。

如果您想要获取任何容器的舞台，我能想到的方法之一是创建一个数组，将动力学舞台与容器(或它们的 ID，例如)相关联。