javascript - 使用 JavaScript 定位时元素的位置不在预期位置

Question

我正在进行轨道模拟，我让行星绕轨道运行，但如果您观察内部的 3 颗行星，然后从轨道的虚线移动。在轨道的底部，行星位于该线下方。在轨道的顶部，行星位于虚线之上或之上。

您可以看到一个工作示例 here .

我认为这与未考虑边框宽度有关，但我尝试纠正该问题的所有措施均未奏效。我目前正在使用 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];
}

Answer 1

你是对的 - 这是边框大小。我检查了 CSS，看起来不错，但较小的行星明显偏离了中心。

要修复它，我所做的就是更改这些行:

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

为此(在划分之前添加两个):

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

您可以在更新的 fiddle here 中看到一个工作示例.

更新 - 似乎这并不能完全解决问题 - 当行星绕到轨道的 RHS 时，它们开始运行到外缘。不过，从好的方面来说，您知道修复就在这两行中……您只需要以适当的量补偿位置，我相信这最终可能会是动态的或基于行星位置的某些东西。