如何翻譯和旋轉桌子周圍的椅子

我想圍繞圓桌平均分配n個椅子。
嘗試了幾個解決方案，這些解決方案涉及圍繞一個圓的動畫對象，但我無法將它們中的任何一個轉換爲我的問題的解決方案。
（http://jsfiddle.net/m1erickson/dFctW/和http://jsfiddle.net/Cu6Zv/1/）如何翻譯和旋轉桌子周圍的椅子

我工作的項目涉及需要的表的選擇量中要devided椅子的選擇量。我設法建立了一個原型，但椅子並不是均勻分開的，也不是朝着桌子中心旋轉。

var step = 360/chairs; 
for(var count = 0; count < chairs; count++){ 
    angle += Math.acos(1-Math.pow(step/radius,2)/2); 

    var x = cx + radius * Math.cos(angle); 
    var y = cy + radius * Math.sin(angle); 

    ctx.rect(x-5,y-5,10,10); 
    ctx.stroke(); 
}

我創造了什麼，我到目前爲止得到了jsfiddle。

希望有人能解釋我如何：

翻譯椅子均勻地繞了一圈
旋轉每個椅子與桌子（朝桌子中央尖）
也許要排隊解釋它背後的數學，所以我可以理解它在做什麼以及如何在需要時進行改造。

在此先感謝。

來源

2017-03-03 Robin Hermans

看在線正在加載的旋轉發電機，他們應該指向你的代碼在正確的方向。 – Darkrum

你在正確的軌道上的代碼是差不多。只需使用弧度，而不是拖放的ACOS行：

var ctx = c.getContext("2d"); 
 
var angle = 0; 
 
var chairs = 6; 
 
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10; 
 
var step = Math.PI * 2/chairs; 
 

 
for(var count = 0; count < chairs; count++){ 
 
    var x = cx + radius * Math.cos(angle); 
 
    var y = cy + radius * Math.sin(angle); 
 
    ctx.rect(x-5,y-5,10,10); 
 
    angle += step; 
 
} 
 
ctx.stroke();

<canvas id=c></canvas>

現在，所有的椅子都將面臨相同的方向。如果你想使他們面對的表中心這也許更容易改用手動計算位置變換旋轉他們：

var ctx = c.getContext("2d"); 
 
var angle = 0; 
 
var chairs = 6; 
 
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10; 
 
var step = Math.PI * 2/chairs; 
 

 
// translate to center 
 
ctx.translate(cx, cy); 
 

 
for(var count = 0; count < chairs; count++){ 
 
    // rotate around center (0,0) 
 
    ctx.rotate(step); 
 
    
 
    // draw using radius as offser on x-axis only 
 
    ctx.rect(radius -5,-5,10,10); 
 
    ctx.rect(radius -5, -1, 4,2); 
 
} 
 
ctx.stroke();

<canvas id=c></canvas>

來源

2017-03-03 22:26:42 K3N

感謝您的快速響應。我設法使用上面的代碼來爲我的原型設計工作的椅子。但是我在正確的方向上面臨椅子的困難。看來翻譯和旋轉正在引起一些問題。我是否應該將這兩個片段結合起來，因爲看起來最後一個小組正在完成這項工作？ –

@RobinHermans什麼是正確的方向？只用一個例子。後者旋轉整個背景，這就是爲什麼你可以在同一個位置繪製同一把椅子，並且因此使它們面向桌子中心。儘管（'ctx.setTransform（1,0,0,1,0,0）;'）你可能想重置變換。如果您使用drawImage，椅子必須設計爲指向右側，即。在這種情況下椅子的後面。否則，您必須在椅子的繪製位置添加局部變換。讓我知道這是你的意思。 – K3N

我覺得我對最後的評論倉促行事。在第二次試圖在我的原型中實現它時，我設法讓它工作。非常感謝。 –

對於你的第一個問題，請嘗試更改：

var step = 360/chairs;

到

var step = 360/(chairs + 1);

來源

2017-03-03 22:18:53

如何翻譯和旋轉桌子周圍的椅子

回答

相關問題