如何在舞台画布（html5，kineticJS）中绘制一个环形墙壁

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