Question

这个答案提供了一个有用的解释，说明如何将“链接”（实际上是重定向到URL的事件）添加到特定对象而不是画布上的所有对象：

How to add URL to an image in Fabric.js?

但是，当放置在生成多个对象的循环内时，它只链接到最后创建的对象的值。

以下是一个例子：

for (var p = 0; p<2; p++) {
  var object = new fabric.Circle({ radius: 10, top: 10 + 20 * p, left: 10 });
  object.on('selected', function() {
    window.location.href = "mylink" + "/" + p;
  })
  canvas.add(object);
}

这将有两个对象链接到“mylink / 1”，当我想要的是第一个对象链接到“mylink / 0”而第二个链接到“mylink / 1”。

我的Javascript技能在1999年陷入困境，但这看起来像是一个懒惰的加载问题。如何强制从每个循环创建的对象具有自己的功能？

Answer 1

它似乎与懒惰的评估/关闭有关。

使用这个漂亮的答案（Javascript: Creating Functions in a For Loop），我能够制作出一个解决方案。发布在这里希望它对其他人有用。请参阅相关答案，了解其工作原理。

  var fxnArr = [];
  for( var p = 0; p < rows.length; p++ ) {
    fxnArr[fxnArr.length] = (function(val) { return function(){  
        window.location.href = "mylink" + "/" + val; 
    } })(p);
  }
  for (var p = 0; p<2; p++) {
    var object = new fabric.Circle({ radius: 10, top: 10 + 20 * p, left: 10 });
    object.on('selected', fxnArr[p] );
    canvas.add(object);
  }

防止在fabric.js调用的函数中进行惰性求值

1 个答案: