Question

我目前有20个目标，他们都有不同的网址。在样本之后，所有这些都必须逐个声明：

// 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
}
});

我们再次宣布

// 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
}
});

我想把它们放在一个循环中。我发现另一个线程有类似的问题，解决方法是：

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;
                        }
                  })
               ]
            }
         });

可以使用正确的叠加层识别列表中的所有目标。但是当我点击叠加层时，所有这些都会导致相同的URL，这是列表中的最后一项。我已经尝试了几个小时T ^ T. 请帮助你。非常感谢!!!!

Answer 1

您需要了解一点JavaScript Closures。

问题是每个onClick函数都使用在外部作用域中声明的相同变量i。关闭规则意味着当调用onClick（）时，i的值将是分配给它的最后一个值。

解决这个问题的一种方法是解析onClick（）的外 - 您可以尝试将已解析的值存储在对象本身中：

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;
                        }
                  })
               ]
            }
         });

在wikitude中为多个目标使用循环

1 个答案: