困在逻辑中试图定位动态的东西

Stuck in logic trying to position something dynamic

本文关键字：动态 定位      更新时间：2023-09-26

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

我有一个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供参考，但由于某种原因，当行星的位置与太阳相同时，我无法获得警报，而它在我的本地计算机上确实对我有效。也许它无论如何都会帮助你！

您可以使用一个简单的圆碰撞检测，如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");
    }
}

尝试使用.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..)
}

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

.position()方法允许我们检索相对于偏移父元素的元素。将此与.offset()，它检索相对于文件将新元素放置在另一个元素附近和内部时包含相同DOM元素的.position()更有用。

因此，您的问题是，对于不同大小的元素，位置/偏移将不同。即使他们在一起。

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

所以现在，你只需要解决一道关于同心圆的简单数学题，也就是说，求出太阳边缘和地球边缘之间的距离，然后你需要减去/加上你想要检查的偏移量。

求两者之间距离的方法是减去半径。现在，我知道r值并不是指像素，所以我不确定在您的情况下如何做到这一点，但我认为这应该会让您获得最大的帮助。

相关文章：