Question

我一直在尝试创建一个jQuery代码，用于扫描ID为map和.map内的所有内容的div，并找到从#A到#B的最短路径#blockings虽然试图避免穿越/触碰computeTrack('#a','#b', '#map'); function computeTrack(A, B, MAP){ var bag = []; var obstacle = []; bag = getDistance(A, B); obstacle = scanning(A, B, MAP); moveAtoB(A, B, MAP, obstacle, bag); } function moveAtoB(A, B, MAP, obstacle, bag){ var clone; $(A).append('<div id="clone" style="position:fixed;width:5px; height:5px; background-color:#F00; top:'+$(A).position().top+'; left:'+$(A).position().left+';"></div>'); clone = '#clone'; generatePath(clone, A, B, MAP, obstacle, bag); } function generatePath(clone, A, B, MAP, obstacle, bag){ //Here lies the challenge if(bag[1] == 'top left'){ /*$(clone).stop().animate({ top:$(B).offset().top, left:$(B).offset().left },Math.round(bag[0]*50),'linear');*/ }else if(bag[1] == 'top right'){ console.log(bag[1]); }else if(bag[1] == 'bottom left'){ console.log(bag[1]); }else if(bag[1] == 'bottom right'){ console.log(bag[1]); } } function collided(obj1, obj2) { var x1 = $(obj1).offset().left; var y1 = $(obj1).offset().top; var h1 = $(obj1).outerHeight(true); var w1 = $(obj1).outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $(obj2).offset().left; var y2 = $(obj2).offset().top; var h2 = $(obj2).outerHeight(true); var w2 = $(obj2).outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true; } function scanning(A, B, MAP){ var allObjects = []; $(MAP+' > *').map(function(){ if(('#'+$(this).attr('id')) !== A && ('#'+$(this).attr('id')) !== B){ allObjects.push(('#'+$(this).attr('id'))); } }); return allObjects; } function getDistance(object, target){ var bag = []; var message = ''; var distance = 0; var objectPos = $(object).offset(); var targetPos = $(target).offset(); if(objectPos.top > targetPos.top){ message += 'bottom'; }else if(objectPos.top <= targetPos.top){ message += 'top'; } if(objectPos.left > targetPos.left){ message += ' right'; }else if(objectPos.left <= targetPos.left){ message += ' left'; } if(message == 'top left'){ distance = Math.sqrt(((targetPos.top - objectPos.top)*(targetPos.top - objectPos.top)) + ((targetPos.left - objectPos.left)*(targetPos.left - objectPos.left))); } if(message == 'top right'){ distance = Math.sqrt(((targetPos.top - objectPos.top)*(targetPos.top - objectPos.top)) + ((objectPos.left - targetPos.left)*(objectPos.left - targetPos.left))); } if(message == 'bottom left'){ distance = Math.sqrt(((objectPos.top - targetPos.top)*(objectPos.top - targetPos.top)) + ((targetPos.left - objectPos.left)*(targetPos.left - objectPos.left))); } if(message == 'bottom right'){ distance = Math.sqrt(((objectPos.top - targetPos.top)*(objectPos.top - targetPos.top)) + ((objectPos.left - targetPos.left)*(objectPos.left - targetPos.left))); } bag.push(distance, message); return bag; }，但我对如何做后者毫无头绪。

任何帮助都非常受欢迎。

插图：

这是我的代码 ：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>AtoB</title>
    <style>
      #map{
        width: 600px;
        height: 300px;
        border: 1px solid #000;
      }
      #a, #b, #blocking1, #blocking2{
        position: fixed;
      }
      #a{
        width: 1px;
        height: 1px;
        top: 50px;  
        left: 100px;
        background-color: #F00;
      }
      #b{
        width: 1px;
        height: 1px;
        top: 200px;
        left: 400px;
        background-color: #F00;
      }
      #blocking1{
        width: 100px;
        height: 100px;
        top: 150px;
        left: 250px;
        background-color: #000;
        color: #fff;
      }
      #blocking2{
        width: 50px;
        height: 50px;
        top: 50px;
        left: 275px;
        background-color: #000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="blocking1">Blocking1</div>
      <div id="blocking2">Blocking2</div>
    </div>
  </body>
</html>

＆＃13;

Localizable.strings

＆＃13;

Answer 1

网格和图表上有最短路径查找方法（https://en.wikipedia.org/wiki/Shortest_path_problem#Single-source_shortest_paths，https://en.wikipedia.org/wiki/Euclidean_shortest_path）

要使用这些，对于您的问题，您必须将空间分离为网格，并将障碍物位置/形状和尺寸以及对象形状/尺寸考虑为约束。然后你有一个图表，可以使用任何最短路径图算法。

另一种方法（特别是连续空间最短路径路径）是使用物理来解决计算问题（例如参见Physical systems for the solution of hard computational problems，Examples of using physical intuition to solve math problems）。

在这种方法中，在目标点吸引的意义上，一个模型（或假设）物体和障碍物被磁化（或具有一种潜在的相互作用）。当障碍击退对象时，该对象。然后，静止平衡解决方案提供了物体行进的最佳路径（在这种情况下也是最短路径）。

例如，没有任何障碍物，物体将以直线朝向目标（吸引它）行进。有障碍物时，将物体从该直线转移到达到目标的最佳路径，同时避开障碍物（其作用类似于重复目标）。

（这种方法倾向于产生更平滑（即分析）的路线，这些路线不一定与所讨论的例子匹配，尽管这不是必需的，人们确实可以模拟更多不连续的路线。）

参考这些方法：

如何在不通过障碍物的情况下检测从A点到B点的最短路径？

1 个答案: