javascript - 在 EaselJS 中按名称定位多个阶段的子级

Question

(this question 的延续。)

因此，我们假设我有两个阶段，并且我想同时更新它们。

$( document ).ready(function() {

    context = "First";
    init();
    context = "Second";
    init();

    createjs.Ticker.addEventListener("tick", tick);
    createjs.Ticker.setFPS(12);
});

stages = [
    "First", "Second"
]

canvases = {
    "First": [
        {"content": "small1.png"}
    ],
    "Second": [
         {"content": "small2.png"}
        ]
};

objects = [];

function init() {
    window[context] = new createjs.Stage(context);
    stage = window[context];
    var graphics = new createjs.Graphics().beginFill("#ffdddd").drawRect(50, 50, 200, 200);
  var shape = new createjs.Shape(graphics);
    var image = new createjs.Bitmap(canvases[context][0].content);
    stage.addChild(shape);
    stage.addChild(image);
    stage.update();
}

function tick() {
    for (i = 0; i < stages.length; i++) {
        stage = window[stages[i]];
        stage.shape.x = stage.shape.x +1;
        stage.update();
    }
}

我能够创建两个阶段，并且它们都可以正确启动，加载正确的图像。

我的勾选功能没有做任何有意义的事情，而且我陷入了“如何分阶段定位项目”。我很确定 stage.shape.x 存在问题，因为 shape 是由 init() 在本地定义的，所以这是预期的；我的问题是如何正确定位它。 (理想情况下，我需要“在阶段内按 id 定位”以外的其他内容，因为我需要能够定位特定对象 - 例如，“第二阶段中名为图像的对象”。)

Answer 1

在函数中创建名为“shape”的变量不会将其创建为舞台上的属性。您可以:

1. 自己设置引用
2. 使用索引查找元素
3. 给它们一个“名称”并使用 getChildByName 方法。

第一个可以很好地配合您的代码，但不能很好地扩展。

var shape = new createjs.Shape(graphics);
stage.shape = shape;
// Later
stage = window[stages[i]];
var shape = stage.shape;

第二种是一个很好的通用方法，但您要么必须知道索引，要么检查元素才能知道如何使用它:

stage = window[stages[i]];
var shape = stage.getChildAt(0);
var image = stage.getChildAt(1);

第三个可能是最适合您使用的选择。

var shape = new createjs.Shape(graphics);
shape.name = "shape";
// Later
stage = window[stages[i]];
var shape = stage.getChildByName("shape");

http://www.createjs.com/docs/easeljs/classes/Stage.html#method_getChildByName

希望这些内容能让您了解如何解决该问题。干杯，