4

ここに画像の説明を入力

私はこのようなものを見つけました

基本的な形状ベースのポジショニングに使用される多くの計算は、比較的簡単です。おそらく高校ですでに取り上げている可能性が高いので、これらの多くはおなじみのように思えます。円の中心が (j,k) で半径が r であるとします。円のパス上にある任意の点の x 位置と y 位置は次のようになります。

x(t) = r cos (t) + j、y(t) = r sin(t) + k。座標ベースのポジショニングの最初の試みに使用できる、より一般的な書き方は次のとおりです。1 2

x = centerX + Math.cos(ラジアン) * 半径; y = centerY + Math.sin(ラジアン) * 半径;

ここで、ラジアン = (angle_of_the_circle/180) * Math.PI. centerX はページ上の円の X 中心であり、centerY は円の Y 中心です。

上記の手法について、それがどのように機能するかという私の概念を誰かが明確にしてもらえますか?

4

1 に答える 1

5

コメントに投稿された私の例が気に入ったようだったので、回答セクションで永遠に存続できるように、回答として投稿すると思いました。

$(document).ready(function() {
    var radius = 100;
    var xCenter = 120;
    var yCenter = 120;
    var cnt = $('li').length;
    var angle = 0;
    var angleDelta = 2 * Math.PI / cnt;
    $('li').each(function(i, el) {
        x = radius * Math.cos(angle) + xCenter;
        y = radius * Math.sin(angle) + yCenter;
        $(this).css({top: y, left: x});
        angle += angleDelta;

    })
})


そして、このjsfiddle.net/9Z7a8に基づくいくつかのフィドル単純な開始
jsfiddle.net/9Z7a8/1より大きな例 - 半径、<li>s の数、および中心のオフセット値を変更するだけです。
jsfiddle.net/9Z7a8/6<li>実行時に sを追加する
jsfiddle.net/9Z7a8/7新しい要素を追加するときのランダム性。
jsfiddle.net/9Z7a8/8/そして、楽しみのために、いくつかの色が変化するもの（完璧ではありません）

于 2013-06-23T07:18:55.543 に答える