如何围绕桌子平移和旋转椅子

Question

我想在圆桌周围均匀地分配n张椅子。
尝试了几种涉及围绕圆圈动画对象的解决方案，但我无法将它们中的任何一个转换为解决我的问题的解决方案。
（http://jsfiddle.net/m1erickson/dFctW/ 和 http://jsfiddle.net/Cu6Zv/1/）

我正在从事的项目涉及一定数量的椅子，需要将这些椅子分配在一定数量的桌子上。我设法构建了一个原型，但椅子分布不均匀，也没有朝桌子中心旋转。

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 到目前为止我所拥有的。

希望有人能解释我如何：

• 将椅子均匀地绕圆圈平移
• 旋转每把椅子，使其与桌子对齐（指向桌子的中心）
• 也许解释一下它背后的数学原理，这样我就可以理解它在做什么以及如何在需要时进行调整。

提前致谢。

Answer 1

您几乎已经掌握了代码。只需使用弧度代替并删除 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>

Answer 2

对于您的第一个问题，请尝试更改：

var step = 360 / chairs;

到

var step = 360 / (chairs + 1);

Answer 3

要围绕桌子平移和旋转椅子，首先确定每把椅子所需的位置。然后，将每把椅子移动（平移）到其位置并调整（旋转）角度以面向桌子。这确保了平衡和功能性的安排。 https://haywoodofficeservices.co.uk/collections/ergonomic-chairs