在EaselJS中按名称定位多个阶段的孩子 [英] Targetting multiple Stages' children by name in EaselJS

问题描述

（继续此问题。）

所以让我们假设我有两个阶段，我想同时更新它们。

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.

我的tick函数没有做任何有意义的，我被困在如何定位项目的阶段。我很确定stage.shape.x是错误的，因为形状是由init（）在本地定义的，所以这是预期的;我的问题是如何正确地定位。 （理想情况下，我需要的不是通过id在舞台中定位，因为我需要目标特定对象的能力，例如，对象称为image在第二阶段。）

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".)

推荐答案

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

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

1. 自行设置参考


2. 使用其索引查找元素


3. 给他们一个名字并使用 getChildByName 方法。

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

b $ b

第一个与你的代码很好，但是扩展性不好。

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

希望这些给你一些洞察如何解决这个问题。
Cheers，

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

这篇关于在EaselJS中按名称定位多个阶段的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！