For循环用于在Adobe Animate CC中创建多个矩形

时间:2016-08-31 04:58:56

标签: canvas html5-canvas jquery-animate adobe easeljs

我正在使用Adobe Animate CC(以前称为Flash Professional CC),我正在尝试调整以下代码段,以便创建多个矩形。

var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,100,100));
this.addChild(shape);

然后我调整了它并把它放在一个for循环中,我认为它可以复制对象。以下代码只创建一个矩形?

for (i = 0; i < 10; i++) {
    var i = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,30,30));
    this.addChild(i);

    // Move object so that they don't lie on top of each other
    this.x += 50;
}

1 个答案:

答案 0 :(得分:2)

您的代码存在一些问题。

我假设您正在扩展Container,以便您可以添加子项。这就是您使用this.addChild()而非stage.addChild()之类的原因,对吧?

  1. 创建形状时,您将覆盖迭代器变量i。我建议使用其他名称,例如squarechild

  2. 您正在递增x的{​​{1}}位置,因此它会将所有正方形添加到同一位置,然后将容器移动50px。所有的孩子仍然会在彼此之上。您应将其更改为this

  3. 一旦你这样做,它仍然无效,因为你正在将每个形状从child.x递增到0 - 所以它们仍将在彼此之上。将其更改为50

  4. 以下是代码段。

    child.x = i * 50

    这是一个快速的小提琴:http://jsfiddle.net/lannymcnie/vphj9qL0/

    干杯。