0

jqueryでli要素を動的に作成しています。これが私のコードです

for ( i = 0; i < 100; i++) {
    $("#sortable").append("<li style='width:"+Size+"px;height:"+Size+"px;' class='ui-state-default' id="+"Image" + i + ">" + "IMAGE" + i + "</li>");
}

次に、各 li 要素内にキャンバスを使用して画像を追加し、キャンバスを使用してテキストを再度書き込みます。出来ますか？

これまでに書いたコードは次のとおりですが、最後のli要素に画像を追加するだけです

for ( i = 0; i < 100; i++) {
    var canvas1 = document.getElementById('canvas'+i).getContext("2d");
    var img = new Image();
    img.src = "/img/test.png";
    img.onload = function() {
      canvas1.drawImage(img, 0, 0,Size,Size);
     };
}
4

2 に答える 2

3

閉鎖はトリックを行う必要があります:

for ( i = 0; i < 100; i++) {
    (function(i){   //added line
        var canvas1 = document.getElementById('canvas'+i).getContext("2d");
        var img = new Image();
        img.src = "/img/test.png";
        img.onload = function() {
            canvas1.drawImage(img, 0, 0,Size,Size);
        };
    })(i);   //added line
}

.onload問題は、イベントがいつ発生するか、forループがすでに終了しており、最後のオブジェクトimgのみを参照することです。Image一般に、変数が で定義されている場合、varそれらは関数スコープを持ち (ではブロックスコープです)、即時呼び出し関数実行 (IIFE) を使用することで、変数はある種のブロックスコープになります。letconst

于 2012-07-25T10:42:13.693 に答える
1

次の 2 つの解決策のいくつかを試すことができます。

  • 相対（li）、絶対（スパン）、静的（img）の位置を組み合わせる - jsfiddle 
var i, Size = 240;
for (i = 0; i < 10; i++) {
    $("#sortable").append('<li style="position:relative; color:white"> <span style="position:absolute; top:20px; left:20px;">text '+i+'</span> <img src="/img/test.png" style="width:'+Size+'px;height:'+Size+'px; border:1px solid black" id="img'+i+'"/> </li>');
}
  • またはキャンバスに画像を描く - jsfiddle 
var i, Size = 240;
for (i = 0; i < 10; i++) {
    $("#sortable").append('<li> Canvas'+i+'<br/><canvas style="width:'+Size+'px;height:'+Size+'px; border:1px solid black" id="canvas'+i+'"/></li>');
}

var img = new Image();
img.src = "/img/test.png";
img.onload = draw_image;

function draw_image() {
    $('canvas').each(function(i){
        var context = this.getContext("2d");
        context.drawImage(img, 0, 0,Size,Size);
        context.font = "40pt Calibri";
        context.fillStyle = "green";
        context.fillText("text "+i, 30, 40);
    });
}

最初の解決策はここで非常にうまく説明されています。2 番目の解決策は、この html5 キャンバス チュートリアルに基づいています。

于 2012-07-25T09:03:02.373 に答える