Targetting multiple Stages' children by name in EaselJS

问题

(Continuation of this question.)

So let's assume I have two stages and I want to update them simultaneously at a tick.

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

I'm able to create both stages and they both initiate correctly, loading the right images.

My tick function isn't doing anything meaningful though, and I'm stuck at "how to target items in stages". I'm pretty sure stage.shape.x is bugging because shape was defined locally by init(), so that's expected; my question is how to target it properly. (Ideally, I need something else than "targeting by id within the stage" because I need the ability to target specific objects - for instance, "the object called image in the Second stage".)

回答1:

Creating a variable named "shape" in your function doesn't create it as a property on the stage. You can either:

set the reference yourself
look up elements using their index
Give them a "name" and use the getChildByName method.

The first works well with your code, but doesn't scale well.

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

The second is a good generic approach, but you would either have to know the indexes, or inspect the element to know how to use it:

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

The third is probably the best option for your usage.

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

Hope these give you some insight to how to approach the issue. Cheers,

回答2:

If you want to post code and get reviews. Just go into a chat room and post your code there. People can chat with you about it.

E.g. http://chat.stackoverflow.com/rooms/17/javascript

来源：https://stackoverflow.com/questions/34969195/targetting-multiple-stages-children-by-name-in-easeljs

标签

javascript

html5

canvas

createjs

easeljs