Question

我认为我编写了一些代码，其最终结果是不可行的。我希望在这种情况下我被证明是错的。在我提出问题之前，我需要一些解释，所以请耐心等待。

我有一个svg元素的动画，看起来像围绕太阳的地球。我编写了我的代码，以便它围绕它旋转并最终将死亡中心撞向太阳。随之而来的是其他动画，就像某种爆炸一样。因此，我想知道太阳的哪一侧受到影响，因为动画是交互式的，因为单击按钮决定碰撞过程何时开始，这意味着所有方面都是可能的。

var positionplanet = $("#Earth").position();
var positionsun = $("#Sun").position();
if((Math.round(positionplanet.left)) == (Math.round(positionsun.left)) && (Math.round(positionplanet.top)) == (Math.round(positionsun.top)))
{alert('booya')}

我认为通过上面的代码，当行星位于与太阳完全相同的坐标时，我可以提醒自己，并从那里开始工作。当水平（左）坐标相同时，垂直坐标（顶部）也是如此。

我的问题是 警报仅在行星与太阳大小相同时起作用 - 当然，只有它才会被放置得那么远和高就像太阳一样。如果行星比太阳小几个像素，那么距离太远也会有几个像素。

我需要的是什么 是太阳的位置，但后来只有几个或更少，我不知道。我坚持这个逻辑，因为高度和宽度可以在使用旋转元件时切换位置！ 我希望行星与太阳接壤然后触发警报，而不是当它100％定位相同时，否则这不会起作用，因为地球需要在我的动画中小得多。然后当动画我需要帮助时，因为我的故事很明显。任何帮助将不胜感激。

我以为我会为你提供FIDDLE作为参考，但出于某种原因，当行星与太阳定位时我无法得到警报，而它对我来说对我有用本地电脑。也许它会帮助你！

Answer 1

您可以使用简单的圆圈碰撞检测，如msdn网站上所述：https://msdn.microsoft.com/en-us/library/dn265052(v=vs.85).aspx

function circlesOverlap(circleA, circleB) { // Returns true if the SVG circles A and B overlap, false otherwise.
    var deltaX = circleA.cx.baseVal.value - circleB.cx.baseVal.value;
    var deltaY = circleA.cy.baseVal.value - circleB.cy.baseVal.value;
    var distance = Math.sqrt( (deltaX*deltaX) + (deltaY*deltaY) ); // The classic distance-between-two-points formula.
    var radiusA = circleA.r.baseVal.value; // The radius of circle A.
    var radiusB = circleB.r.baseVal.value; // The radius of circle B.

    if (circleA.id == circleB.id) // If true, circleA and circleB are the same circle.
      return false;

    return distance <= (radiusA + radiusB);
};

使用你的小提琴，这是它给出的： https://jsfiddle.net/odubuc/qk3qrwbp/15/

您的动画功能现在非常简单：

function animate () {
    var earth = document.getElementById("Earth"),
        sun = document.getElementById("Sun");

    planetrotation("Earth");  

    if( circlesOverlap(earth, sun) )
    {
        earth.setAttribute("fill-opacity", "0.0"); 
        sun.setAttribute("fill-opacity", "0.0");
    }
}

Answer 2

尝试使用.offset（）而不是.position（）（检查控制台，有位置，值永远不会改变，有偏移，它们会改变）

var positionplanet = $("#Earth").offset();
var positionsun = $("#Sun").offset();

https://jsfiddle.net/zkuhpjwf/

就良好的碰撞检测而言，如果行星的顶部偏移量大于太阳的顶部偏移量，但是小于太阳的顶部偏移量+太阳的高度以及左侧偏移/高度的相似值，则可以写一些内容。当行星在任何方向上接触太阳时触发，你可以将行星的高度和宽度投射到等式中。这需要一些游戏

if ( (positionplanet.left > positionsun.left && positionplanet.left < positionsun.left + SUNWIDTH) && (positionplanet.top > positionsun.top && positionplanet.top < positionsun.top + SUNHEIGHT) ) {
    //the planet is completely inside of the sun
} 

if ( (positionplanet.left > positionsun.left - PLANETWIDTH && positionplanet.left < positionsun.left + SUNWIDTH - PLANETWIDTH) && (positionplanet.top > positionsun.top - PLANETHEIGHT && positionplanet.top < positionsun.top + SUNHEIGHT - PLANETHEIGHT) ) {
    //the planet is touching the sun (will need some fiddling I'm sure..)
}

Answer 3

根据jQuery文档，您应该能够使用position或offset -

.position()方法允许我们检索当前位置相对于偏移父项的元素。与此形成鲜明对比 .offset()，它检索相对于的当前位置文献。将新元素定位在另一个元素附近时同样包含DOM元素，.position()更有用。

那么，你的问题在于，不同大小的元素的位置/偏移量会有所不同。即使他们在彼此之上。

推理，是因为当你要求太阳的left定位时，因为它的半径越大，因此一个更大的圆，它的左偏移/位置小于地球的位置。

所以现在，你只需要一个简单的数学问题来解决同心圆 - 也就是找到太阳边缘和地球边缘之间的距离，那么你需要减去/加到你想要的任何偏移量检查。

找到两者之间距离的方法是减去半径。现在，我知道r值并不是指像素，所以我不确定如何在你的情况下这样做，但我认为这应该可以帮到你。

坚持逻辑试图定位动态

3 个答案: