如何在舞臺畫布（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'}) 
    ) 
    }