ориентируется несколько этапов по имени в 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 прослушивает, потому что форма была определена локально init(), поэтому это ожидается; мой вопрос в том, как правильно настроить таргетинг. (В идеале мне нужно что-то еще, чем «таргетинг по id в рамках этапа», потому что мне нужна возможность нацеливаться на определенные объекты - например, «объект, называемый изображением на втором этапе».)

Answer 1

Создание переменной с именем " форма "в вашей функции не создает его как свойство на сцене. Вы можете:

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

Надежда это дает вам некоторое представление о том, чтобы, как подойти к этому вопросу. Cheers,

Answer 2

Если вы хотите опубликовать код и получить рецензирование. Просто зайдите в чат и отправьте свой код там. Люди могут общаться с вами об этом.

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