Logique de boucle pour dessin de javascript en ligne

J'ai suivi deux tableaux:

var element_1 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]); var element_2 = new Array([x1,y1],[x2,y2],[x3,y3],[x4,y4]);

Logique: Je veux exécuter une boucle (imbriquée) où chaque élément de element_1 (pour par exemple [x1,y1] ) est comparé à chaque élément de element_2 et la distance la plus courte entre eux doit être calculée dans la boucle (je sais comment calculer Le chemin le plus court). La partie délicate ici est que j'ai besoin d'une référence pour savoir quelle paire a fait le passé le plus court et ensuite obtenir ces combinaisons [x1,y1] et [x2,y2] pour tracer une ligne.

Exemples de données:

 var element_1 = new Array([10,0],[20,10],[10,20],[0,10]); var element_2 = new Array([10,30],[20,40],[10,50],[0,40]);

La ligne doit être établie entre [10,20] et [10,30]. En outre, je devrais en quelque sorte stocker les coordonnées quelque part pour la passer à la fonction de dessin en ligne

Comment puis-je faire ceci? Toute participation serait très appréciée.

Voici comment je le ferais:

 var element_1 = [[0,0],[1,2],[5,3],[6,8]]; var element_2 = [[0,1],[1,4],[5,9],[9,8]]; var closest = {a: false, b: false, distance: false}; for(var i=0; i<element_1.length; i++) { for(var j=0; j<element_2.length; j++) { var distance = calculate_distance(element_1[i], element_2[j]); console.log('Distance between element_1['+i+'] and element_2['+j+']: ' + distance); if(closest.distance === false || distance < closest.distance) { closest = {a: element_1[i], b: element_2[j], distance: distance}; } } } console.log('The shortest path is between '+closest.a+' and '+closest.b+', which is '+closest.distance); function calculate_distance(a, b) { var width = Math.abs( a[0] - b[0] ), height = Math.abs( a[1] - b[1] ), hypothenuse = Math.sqrt( width*width + height*height ); return hypothenuse; }

Eh bien, j'ai bien aimé cette question. Cela m'a inspiré à inventer une méthode Array générique pour appliquer un rappel avec les autres éléments de deux tableaux. J'ai donc appelé Array.prototype.withEachOther() . Ce qu'il fait, c'est exactement ce que @blex a fait dans sa solution avec des boucles imbriquées. Il applique une opération (fournie par le rappel) à chaque élément de tableau avec l'élément d'un autre tableau. Voyons comment cela fonctionne.

 Array.prototype.withEachOther = function(a,cb,s=0){ return this.reduce((p,et) => a.reduce((q,ea) => cb(et,ea,q),p),s); }; var element_1 = [[10,0],[20,10],[10,20],[0,10]], element_2 = [[10,30],[20,40],[10,50],[0,40]], cb = (p1,p2,q) => {var h = Math.hypot(p1[0]-p2[0],p1[1]-p2[1]); return h < qd ? {d:h,p1:p1,p2:p2} : q}, minDist = element_1.withEachOther(element_2,cb,{d:Number.MAX_SAFE_INTEGER,p1:[],p2:[]}); console.log(minDist);