用javascript代碼圍繞着一個方塊

Question

我被AtotherRobot在stackoverflow上給了下面的代碼。

var x,y; 

// amount of chairs 
var totalChairs = 12; 
// square size 
var squareSize = 200; 
var chairSize = 60; 

// issues with 3,5,7,8,9,10,11 

for(var i=0; i<totalChairs; i++){ 

    var angle = 2*Math.PI * i/totalChairs; 

    if (angle > Math.PI/4 && angle <= Math.PI* 3/4){ 
     x = (squareSize/2)/Math.tan(angle); 
     y = -squareSize/2 - chairSize/2; 
    } else if (angle > Math.PI* 3/4 && angle <= Math.PI* 5/4){ 
     x = -squareSize/2 - chairSize/2; 
     y = (squareSize/2) * Math.tan(angle); 
    } else if (angle > Math.PI* 5/4 && angle <= Math.PI* 7/4){ 
     x = -(squareSize/2)/Math.tan(angle); 
     y = -squareSize/2 + squareSize + chairSize/2; 
    } else { 
     x = -squareSize/2 + squareSize + chairSize/2; 
     y = -(squareSize/2) * Math.tan(angle); 
    } 

    x -= Math.round(chairSize/2) - squareSize/2; 
    y -= Math.round(chairSize/2) - squareSize/2; 

    $("#square").append("<div class='chair' style='left:"+x+"px;top:"+y+"px;'></div>"); 
} 

這是畫出椅子圍着一張桌子用JavaScript它的距離相等繪製椅子1,2,4,6,12以下金額的偉大工程。

但與下列數量的椅子3,5,7,8,9,10,11似乎是由椅子寬度。

是他們的任何人可以讓我知道爲什麼這可能會發生數學不是我的強項，並會真正感謝一些幫助，你可以在這裏看到一個例子與8把椅子。

http://jsfiddle.net/Ld769/4/

感謝

我一直做這個進步徹底改變我我怎麼做的，現在其實都明白怎麼回事就這一個，並可以擴展表，以滿足仍然有與remander到問題爲某些人編號？

 var x,y; 

// amount of chairs 
var totalChairs = 18; 
var chairSize = 60; 
// square size 
var squareSize = Math.round(totalChairs/4) * chairSize; 

//alert("squareSize: " + squareSize); 
// issues with 5,9,13,17,21 
// works with 1,2,4,6,12 
var remainder = Math.round(totalChairs/4); 

var s1 = 0; 
var s2 = 0; 
var s3 = 0; 
var s4 = 0; 

for(var i=0; i<totalChairs; i++){ 

    var iter = i; 
    if(iter+1 <= remainder){ 

     var s1i = s1++; 
     console.log("s1i: " + s1i); 

     x = s1i * chairSize; 
     y = -chairSize; 
     newr = remainder*2; 

    } else if(iter+1 <= newr){ 
     var s2i = s2++; 
     console.log("s2i: " + s2i); 
     y = s2i * chairSize; 
     x= squareSize; 
     newe = remainder*3; 

    } else if(iter+1 <= newe){ 

     var s3i = s3++; 
     console.log("s3i: " + s3i); 
     x = - s3i * chairSize + squareSize - chairSize; 
     y = squareSize; 

    }else{ 
     var s4i = s4++; 
     console.log("s4i: " + s4i); 
     y = - s4i * chairSize + squareSize - chairSize; 
     x= -chairSize; 

    }   

    $("#square").css({"width":(squareSize) + "px","height":(squareSize) + "px"}); 
    $("#square").append("<div class='chair' style='left:"+Math.round(x)+"px;top:"+Math.round(y)+"px;'><p>"+i+"<br/>x"+x+",y"+y+"</p></div>"); 
    $(".chair").css({"width":(chairSize) + "px","height":(chairSize) + "px"}); 
} 

可以看到的jsfiddle版本在這裏 http://jsfiddle.net/isimpledesign/Ld769/19/

Answer 1

我會弄清楚需要多少，以適應在4個方面之一。 4 * 2 = 8，不夠，4 * 3 = 12 OK !,這意味着3邊獲得3，1得到2.這意味着最小的寬度和高度必須與最包裝的一面相同（這樣坐着的配合舒適）

如果你想讓他們均勻分開？只要算出椅子的數量，比如說11就可以分成360來計算分離角度，然後投影到廣場上