Utilisation de la boucle pour plusieurs cibles dans wikitude

Question

J'ai actuellement 20 cibles et elles ont toutes des URL différentes. À la suite de l'échantillon, tous doivent être déclarés par un comme:

// Create overlay for page one 
var imgOne = new AR.ImageResource("assets/imageOne.png"); 
var overlayOne = new AR.ImageDrawable(imgOne, 1, { 
    offsetX: -0.15, 
    offsetY: 0 
}); 
var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", { 
    drawables: { 
    cam: overlayOne 
} 
}); 

et encore nous déclarons

// Create overlay for page two 
var imgTwo = new AR.ImageResource("assets/imageTwo.png"); 
var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, { 
    offsetX: 0.12, 
    offsetY: -0.01 
}); 
var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", { 
    drawables: { 
    cam: overlayTwo 
} 
}); 

Je veux les mettre en boucle à la place. J'ai trouvé un autre thread ayant le même problème, et la solution est:

loop(condition){ 
    new AR.Trackable2DObject(this.tracker, "targetName", { 
    drawables: { 
    cam: new AR.ImageDrawable(new AR.ImageResource("assets/targetImage.png"), 1, { 
    offsetX: -0.15, 
    offsetY: 0 
    }) 
} 
}); 
} 

But my overlay is html with URL, so when i tried 


for(i=0;i<targetList.length;i++){ 
      new AR.Trackable2DObject(this.tracker, targetList[i], { 
      drawables: { 
       cam: [clickMeOverlay, sparkles, 
       new AR.HtmlDrawable({ 
        uri: htmlAssetFolder+targetList[i]+".html" 
        }, 1, { 
        offsetX: 1, 
        offsetY: 0, 
        horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT, 
        verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP, 
        clickThroughEnabled: true, 
        onClick: function() { 
         document.location = "architectsdk://"+targetList[i]; 
         return true; 
         } 
        }) 
       ] 
      } 
     }); 

tous cible dans la liste peut être reconnue avec la superposition correcte. mais quand je clique sur la superposition, tous mènent à la même URL, qui est le dernier élément de la liste. J'ai essayé pendant quelques heures T^T pour votre aimable aide s'il vous plaît. Merci beaucoup!!!!

Answer 1

Vous devez en apprendre davantage sur le JavaScript Closures.

Le problème est que chacune de vos fonctions onClick utilise la même variable i qui est déclarée dans une étendue externe. Les règles de fermeture signifient que lorsque onClick() est appelé, la valeur i sera la dernière valeur qui lui est affectée.

Une façon de le résoudre est de résoudre l'URL en dehors de onClick() - vous pouvez juste essayer de stocker la valeur réglée dans l'objet lui-même:

for(var i=0;i<targetList.length;i++){ 
      new AR.Trackable2DObject(this.tracker, targetList[i], { 
      drawables: { 
       cam: [clickMeOverlay, sparkles, 
       new AR.HtmlDrawable({ 
        uri: htmlAssetFolder+targetList[i]+".html" 
        }, 1, { 
        offsetX: 1, 
        offsetY: 0, 
        horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT, 
        verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP, 
        clickThroughEnabled: true, 
        url: "architectsdk://"+targetList[i], 
        onClick: function() { 
         // assumes 'this' context points to the current object 
         document.location = this.url; 
         return true; 
         } 
        }) 
       ] 
      } 
     });