0 
<script src="/js/kinetic-v4.3.3.min.js"></script>
<script>
$(document).ready(function(){

    var gravity = 0.5;

    var stage = new Kinetic.Stage({

        container: 'stage',
        width: 625,
        height: 366
    });

    var wallLayer = new Kinetic.Layer();
    var walls = [];
    var wallCount = 7;

    for(var i = 0; i < wallCount; i++)
    {
        var y = i * 61;
        walls.push(new Kinetic.Rect({
            x: 0,
            y: y,
            width: 40,
            height: 60,
            fill: '#FF0000'
        }));
      wallLayer.add(walls[i]);
    }

    stage.add(wallLayer);


      var anim = new Kinetic.Animation(function(frame) {
        //wall.vy += gravity;
      //  wall.setY(wall.vy);
      }, wallLayer);

      anim.start();
})

</script>
<div id="stage">

</div>

在这里，我只画了舞台的左侧，有很多墙，将每面墙推成一个数组，但是我怎样才能在一个循环中将相同的内容绘制到顶部、右侧和底部？或者我需要在 4 个循环中完成它？

4

2 回答 2

0

您可以根据以下内容修改您的源代码。在 jsbin.com 中测试过，但不知道如何从那里保存。

for (var j=0; j<7; j++) {
  if (i==0 || i==6) {
    wallLayer.add(
      new Kinetic.Rect({
        x: j*61,
        y: i*61, 
        width: 40, 
        height: 60,
        fill: '#FF0000'}) 
    )
  } else if (j==0 || j==6) {
    wallLayer.add(
      new Kinetic.Rect({
        x: j*61,
        y: i*61, 
        width: 40, 
        height: 60,
        fill: '#FF0000'}) 
    )
  }
于 2013-02-24T18:01:25.193 回答
0

You can use two loops since the opposite sides are symmetric. That is, left and right sides; and, top and bottom sides.

The following code is untested and set the dimensions properly.

var wallLayer = new Kinetic.Layer();
var walls = [], wallCountX = 11, wallCountY = 7;

/* shorthand */
var addWall = function(x, y, w, h){
    var wall = new Kinetic.Rect({
        x: x, y: y, width: w, height: h, fill: '#FF0000'
    });
    walls.push(wall);
    wallLayer.add(wall);    
};

/* left and right sides are symmetric */
for (var i = 0; i < wallCountY; i++) {
    addWall(0, i * 61, 40, 60);
    addWall(585, i * 61, 40, 60);
}

/* top and bottom sides are symmetric */
for (var i = 0; i < wallCountX; i++) {
    addWall(i * 61, 0, 60, 40);
    addWall(i * 61, 326, 60, 40);
}
于 2013-02-24T10:17:29.407 回答