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

Posted 2023-03-05

【中文标题】在 EaselJS 中按名称定位多个阶段的子级

【英文标题】：Targetting multiple Stages' children by name in EaselJS

【发布时间】：2016-04-30 09:08:22

【问题描述】：

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

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

不过，我的 tick 函数并没有做任何有意义的事情，而且我被困在“如何分阶段定位项目”上。我很确定 stage.shape.x 有问题，因为 shape 是由 init() 在本地定义的，所以这是意料之中的；我的问题是如何正确定位它。 （理想情况下，我需要“在阶段内按 id 定位”之外的其他内容，因为我需要能够定位特定对象 - 例如，“第二阶段中称为图像的对象”。）

【问题讨论】：

是你的tick函数中的错字吗？你只是说stage.update，实际上并没有调用更新。

确实，这是一个错字。感谢您指出！

【参考方案1】：

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

自己设置参考 使用索引查找元素 给他们一个“名字”并使用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

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

【讨论】：

哇，太棒了。非常感谢，我认为这将为我解锁很多东西（第三个选项非常有效）！ （附带问题：有没有一个地方可以发布“完成”的代码并获得评论？......我假设是 Github，但如果有其他地方，仍然要问。）

【参考方案2】：

如果您想发布代码并获得评论。只需进入聊天室并在那里发布您的代码。人们可以和你聊天。

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