Question

<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个循环中制作它？

Answer 1

您可以使用两个循环，因为相对的两侧是对称的。那就是左右两边;以及顶部和底部。

以下代码未经测试并正确设置尺寸。

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);
}

Answer 2

您可以根据以下内容修改源代码。在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'}) 
    )
  }

如何在舞台画布周围绘制一个循环墙（html5，kineticJS）

2 个答案: