javascript - DIV 要素を円形に配置する

Question

これらの 5 つの要素を円形に配置する必要があります。そして、私の三角法の知識は貧弱すぎて、解決策を思いつくことができません.

http://jsbin.com/acOSeTE/1/edit

助けてくれる人は誰でも、数式について説明するか、それに関する情報へのリンクを私に転送してください。

フレームワークの背後にあるものを知りたいので、jQuery ソリューションは必要ありません。

ありがとう。

Answer 1

そのような精度で div を配置するには、ほぼ確実に CSS が必要になります。

あなたが探している一般的な式は、円上の任意のラジアン位置 (円には 2π ラジアンがあります) に対して、xとyは次のとおりです。

x = originX + (Math.cos(radians) * radius);
y = originY + (Math.sin(radians) * radius);

例:ライブコピー| ライブソース

CSS (インライン スタイルを使用できると思います):

#target {
  position: absolute;
  border: 1px solid black;
  width: 1px;
  height: 1px;
}

HTML:

<input type="button" id="theButton" value="Start/Stop">
<div id="target"></div>

JavaScript:

(function() {
  var radians, maxRadians, target, radius, originX, originY, inc, timer;

  radius = 50;
  originX = 100;
  originY = 100;

  radians = 0;
  maxRadians = 2 * Math.PI;
  inc = 10 / 360;
  target = document.getElementById("target");
  positionTarget();

  function positionTarget() {
    var x, y;

    x = originX + (Math.cos(radians) * radius);
    y = originY + (Math.sin(radians) * radius);
    console.log(x + "," + y);
    target.style.left = x + "px";
    target.style.top =  y + "px";
    radians += inc;
    if (radians > maxRadians) {
      radians -= maxRadians;
    }
    timer = setTimeout(positionTarget, 30);
  }

  document.getElementById("theButton").onclick = function() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
    else {
      timer = setTimeout(positionTarget, 30);
    }
  };
})();