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'

为此（在划分之前添加了两个）：

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

您可以在此处更新的小提琴中看到一个工作示例。

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

于 2012-05-24T02:35:18.070 回答