在 EaselJS 中按名称定位多个阶段的 children

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();
    }
}

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

虽然我的 tick 函数没有做任何有意义的事情，但我一直停留在 "how to target items in stages"。我很确定 stage.shape.x 有问题，因为 shape 是由 init() 在本地定义的，所以这是预料之中的；我的问题是如何正确定位它。（理想情况下，我需要 "targeting by id within the stage" 以外的东西，因为我需要能够针对特定 objects - 例如 "the object called image in the Second stage"。）

Answer 1

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

自己设置引用
使用索引查找元素
给他们一个"name"并使用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

希望这些能让您对如何解决问题有所了解。干杯，

Answer 2

如果您想 post 编写代码并获得评论。只需进入聊天室，然后 post 您的代码就在那里。人们可以与您讨论它。

例如https://chat.whosebug.com/rooms/17/javascript

在 EaselJS 中按名称定位多个阶段的 children

Targetting multiple Stages' children by name in EaselJS

html

javascript

canvas

easeljs

createjs