Zeichnung mehrere Bilder auf eine Leinwand mit Bild.onload

Bin ich in Probleme laufen, wenn Sie versuchen, zeichnen Sie ein großes 2D-array von Bildern auf eine Leinwand. Mit einem separaten Programm, ich nehme eine große image-Datei und bricht es bis kleinere, gleichmäßige Stücke. Ich bin mit dem 2D-array zur Darstellung dieses "raster" der Bilder, und im Idealfall, wenn ich zuweisen das SRK jedes element im Netz, das würde das Bild gezeichnet werden, an die richtige Stelle auf der Leinwand, sobald seine bereit. Aber mein code funktioniert nicht.

var grid = new Array()  
/*grid is set to be a 2D array of 'totalRows' rows and 'totalCols' columns*/  

/*In the following code, pieceWidth and pieceHeight are the respective height/widths  
of each of the smaller 'pieces' of the main image. X and Y are the coordinates on  
the canvas that each image will be drawn at. All of the images are located in the  
same directory (The src's are set to http://localhost/etc), and each individual  
filename is in the form of name(row*totalRows + col).png, ex, traversing the 2D  
array left to right top to bottom would give image1.png, image2.png, etc*/  

for (var row = 0; row < totalRows; row++)  
    {  
        for (var col = 0; col < totalCols; col++)  
        {  
            grid[row][col] = new Image();  
            var x = col * pieceWidth;  
            var y = row * pieceHeight;  
            grid[row][col].onload = function () {ctx.drawImage(grid[row][col], x, y);};  
            grid[row][col].src = "oldimagename" +  ((row * totalRows) + col) + ".png";  
        }  
    }

Habe ich versucht mit diesem code in Opera, Firefox, Chrome und Safari. Die onload-events feuern nicht auf alle in Opera, Chrome und Safari (ich platziert eine Warnung innerhalb der onload-Funktion, es kam nie). In Firefox nur das ERSTE Bild (grid[0][0])'s onload-Ereignis ausgelöst. Allerdings ist mir aufgefallen, dass wenn ich ein alert direkt NACHDEM ich die src des aktuellen Elements, jeder onload-Ereignis im Firefox wird ausgelöst, und das gesamte Bild gezeichnet wird. Im Idealfall möchte ich diese Arbeit in allen 4 Browsern (ich nehme an, IE nicht funktionieren, weil es keine Unterstützung für Leinwände), aber ich weiß einfach nicht was Los ist. Jede Hilfe/input wird sehr geschätzt, danke!

InformationsquelleAutor Kaz | 2010-07-15
  1. 10

    Ich denke, das problem ist, dass man nicht immer die Variablen in einer closure. Ändern Sie diese Zeile:

    grid[row][col].onload = function () {ctx.drawImage(grid[row][col], x, y);};

    Zu

    grid[row][col].onload = function () {window.alert('row:' + row + ' col:' + col);};

    Und was Sie sehen ist, dass Ihre Warnungen sind der Rückgabe den gleichen Wert für row und col auf jeden Anruf. Sie brauchen, um diese Variablen verpackt in einem Verschluss, so dass Sie Ihre Funktion befasst sich mit den Werten und nicht die Referenzen:

    var drawCanvasImage = function(ctx,grid,row,col,x,y) {
    return function() {
        ctx.drawImage(grid[row][col], x, y);
    }
}

    Dann tun:

    grid[row][col].onload = drawCanvasImage(ctx,grid,row,col,x,y);

    Diese Beispiel-Seite funktioniert bei mir in Firefox und Chrome.

    • Vielen, vielen Dank! Das Problem war gleich da.
    InformationsquelleAutor robertc
Schreibe einen Kommentar