AtomicRobot 在 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 把椅子的示例。
谢谢
我一直在彻底改变我的工作方式,现在我已经真正了解了这个是怎么回事,并且可以扩展表格以适应对于某些人的数量仍然存在问题????
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"});
}
</p>
可以在此处查看 jsfiddle 版本 http://jsfiddle.net/isimpledesign/Ld769/19/