2

私は惑星を周回させている軌道シミュレーションに取り組んでいますが、内側の 3 つの惑星を見ると、軌道の破線からずれています。軌道の底では、惑星は線の下にあります。軌道の最上部では、惑星は破線の上か上にあります。

ここで実例を見ることができます。

これは境界線の幅が考慮されていないことに関係していると思いますが、問題を修正しようとしてもうまくいきませんでした。現在、outerWidth() と outerHeight() を使用していますが、うまくいかないようです。

これは関連するコードです。

var width = parseFloat($(this).parent().outerWidth()) / 2;
var height = parseFloat($(this).parent().outerHeight()) / 2;
var point = getPoint(width, height, angle * (Math.PI / 180));

$(this).css('left', point[0] + ($(this).parent().outerWidth() / 2) + 'px');
$(this).css('top', point[1] + ($(this).parent().outerHeight() / 2) + 'px');

getPoint機能は次のとおりです。

function getPoint(width, height, angle)
{
    var x = parseFloat(width) * Math.cos(angle);
    var y = parseFloat(height) * Math.sin(angle);
    return [x, y];
}
4

1 に答える 1

0

そうです-それはボーダーサイズです。CSSを確認したところ、問題ないように見えましたが、小さな惑星は明らかに中心から外れていました。

それを修正するために、私がしたのはこれらの行を変更することだけでした：

    'margin-top'  : '-' + ($(this).outerHeight() / 2) + 'px',
    'margin-left' : '-' + ($(this).outerWidth() / 2) + 'px'

これに（分割する前に2つ追加）：

    'margin-top'  : '-' + (($(this).outerHeight() + 2) / 2) + 'px',
    'margin-left' : '-' + (($(this).outerWidth() + 2) / 2) + 'px'

ここで更新されたフィドルで実際の例を見ることができます。

UPDATE-これで問題が完全に解決されているわけではないようです-惑星が軌道のRHSに近づくにつれて、惑星は外縁に移動し始めます。しかし、良い面としては、修正がこれらの2つの行にあることを知っています...適切な量の位置を補正する必要があります。これは、動的または惑星の位置に基づくものになる可能性があると私は信じています。

于 2012-05-24T02:35:18.070 に答える