2

私はJavaScriptプロジェクト（jqueryを使用）を持っており、その中にコードでキャンバスを描画し、その上に画像の配列を挿入します。エラーなしで問題なく表示されます。

問題： later on, i try to get these images inside from canvas to compare if they have the same src or the same id to don't replace it with the new image

私の機能は次のとおりです。 

var inter;
var screen;

function onClick(id){
    getScreen(id, function(data){
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
        inter = setInterval(function(){screen(id); }, 5000);
    });
}

function screen(id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById('screenCanvas').width != data.maxX) ||
            (data.maxY != screen.document.getElementById('screenCanvas').height)){
            screen.close();
            screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);        
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
    });
}

function draw(data) {  
    var canvas = screen.document.getElementById('screenCanvas');
    var context = canvas.getContext('2d');  
    var tileY = 0;
    var tileX = 0;
    var counter = 0;
    var tileWidth = data.tileWidth;
    var tileHeight = data.tileHeight;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){  
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var img = new Image();  
            img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                return function() {
                    context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                }
            })(img, tileX, tileY, tileWidth, tileHeight);  
            img.src = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
         } 
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }  
}

</script>

このコードは配列(data) that contains list of (id, maxX, maxY, tileWidth, tileHeight, tiles[x, y, imageId])を取得して新しいウィンドウを開き、このウィンドウにキャンバスコードを書き込んで画像を描画し、タイマーを呼び出して5秒ごとに動作します。5秒ごとに、screenメソッドを呼び出してデータを再度取得し、screenが開いているかどうかを確認してから、すべての内部htmlを削除して新しいキャンバスを書き換え、サイズが変更されているかどうかをテストします。

このコードはエラーなしで正常に動作しますが、これらのコードを編集してキャンバス内の画像を取得し、同じimageIdを持っていることをテストする必要があります。再度ダウンロードしないでください（画像IDを保存せず、画像を取得するには、 img.idに保存するか、srcで画像を取得できます。これは、imageIdが画像パスの一部であるためです。

ノート：

id[unique](is the id of the user), 
maxX(maximum width of the screen), 
maxY(maximum height of the screen), 
tileWidth(width of each image), 
tileHeight(height of each image),
tiles(list of images)
    x(left position of the image)
    y(top postion of the image) 
    imageId[unique](id of each image)
example: data[id:1,maxX:1920,maxY:1080,tileWidth:480,tileHeight:270,tiles:(x:2,y:1,imageId:1a)]

何か助けはありますか？

4

2 に答える 2

1

前述のようRavi Jainに、画像をキャンバスオブジェクトに描画することはできません。また、前述のように、 robertcimg要素を使用できます。

キャンバスではなくimg要素の使用法を指定する次の関数を試してください。 

function onClick(id){
    getScreen(id, function(data){
        var inter;
        var screen;
        var width = parseInt(data.maxX) + parseInt(data.tileWidth);
        var height = parseInt(data.maxY) + parseInt(data.tileHeight);
        screen=window.open('',id,'width=' + width + ',height=' + height , true);
        draw(screen, data);
        inter = setInterval(function(){screen(screen, inter, id); }, 5000);
    });
}

function screen(screen, inter, id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById("screen").style.width != data.maxX + "px") ||
           (screen.document.getElementById("screen").style.height != data.maxY + "px")){
            screen.close();
            var width = parseInt(data.maxX) + parseInt(data.tileWidth);
            var height = parseInt(data.maxY) + parseInt(data.tileHeight);
            screen=window.open('',id,'width=' + width + ',height=' + height , true);
        }
        draw(screen, data);
    });
}

function draw(screen, data) {
    var screenDiv = screen.document.getElementById("screen");
    if (screenDiv == null) screen.document.write('<div id="screen" style="width:' +
                data.maxX + '; height:' + data.maxY + '; " style="margin: 0 auto;" >');
    var tileY = 0; 
    var tileX = 0;
    var counter = 0;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){ 
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var imageSource = screen.document.getElementById("id_" + counter);
            var path = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            if (imageSource == null){
                screen.document.write('<img id="id_' + counter + '" src="' + path +
                '" height="' + data.tileHeight + '" width="' + data.tileWidth + '" />');
            }else if(imageSource.src != path){
                imageSource.src = path;
            }
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
        }
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }
    if (screenDiv == null) screen.document.write('</div>');
}

</script>

コードは正常に機能していますが、1つのインスタンスについてのみ、関数内ではなくスクリプトの上部でvarscreenとvarinterを宣言します。これは、最初のユーザーをクリックして画面を取得した場合（コード、プロジェクトの実行内容を理解すると、最初のユーザーのタイマーが停止し、2番目のユーザーのタイマーが開始します。私が書いたこのコードは、この問題と、画像が変更された場合に画像のソースを置き換えるという問題を解決します。

これがあなたの助けになることを願っています、

幸運を;

于 2012-06-15T07:21:28.403 に答える
0

canvasピクセルに何かを描いたら。それらのピクセルを作成するために使用されたオブジェクトは保持されません。この種の情報が必要な場合は、外部で自分で管理するか、 SVGのようcanvasにオブジェクトを保持するものを使用する必要があります。

于 2012-06-14T12:23:02.920 に答える