2016-12-21 15 views
1

この回答は、「リンク」(実際にはURLにリダイレクトされるイベント)をキャンバスのすべてのオブジェクトではなく特定のオブジェクトに追加する方法を説明しています:複数のオブジェクトを生成し、ループの内側に配置されたときfabric.jsで呼び出される関数の遅延評価の防止

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

はしかし、それだけの価値を作成した最後のオブジェクトにリンクします。ここで

は例です:私が欲しいこと「mylink/0」とリンクする第二にリンクする第一の目的のためであるとき

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/1"に変更します。

私のJavascriptスキルは1999年に固まっていますが、これは私には怠惰な読み込みの問題のようです。各ループから作成されたオブジェクトに独自の機能を持たせるにはどうすればよいですか?

答えて

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); 
    } 
+1

簡単に解決策ではなく、VaRのp' 'よりp'せ'使用することです - うん - インターネットエクスプローダ用transpilerを通って、 –

+1

@JaromandaX出来上がり、それを実行します。最近ではES6がどこでもサポートされています。 [This Mozilla Hacks post](https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/)は、次のように説明しています: "フォームのループ' for(let x ... ) 'それぞれの反復で' x'の新しいバインディングを作成します。 " –

+0

便利です。ありがとう! –

関連する問題