Wie platziert man Bilder in einer Reihe basierend auf der angegebenen Anzahl in HTML5 Canvas mit Javascript?

Question

Wie werden Bilder in html5-Canvas hintereinander angeordnet, basierend auf der Anzahl der dynamisch gegebenen Bilder und wie verteilt man den Abstand zwischen den Zeilen, wobei die Anzahl der Zeilen auch dynamisch angegeben wird?

Answer 1

Wenn Sie Layout so einfach wie das in Javascript tun möchten, können Sie es einfach selbst tun. Im folgenden Beispiel werden die Zeilen basierend auf der Höhe der Zeichenfläche gleichmäßig verteilt. Anschließend werden die Rechtecke in jeder Zeile gleichmäßig um die Breite der Zeichenfläche verteilt. Sie können die Größe des Browsers ändern und beobachten, wie das Layout die Rechtecke bewegt.

var imageHeight = 100; 
 
var imageWidth = 80; 
 

 
//This defines how many pictures are in each row 
 
var rowCount = [ 
 
2, 
 
3, 
 
5 
 
]; 
 

 
setCanvasSize(); 
 
redrawCanvas(); 
 

 
function setCanvasSize() { 
 

 
\t var can = document.getElementById("myCanvas"); 
 

 
\t var width = window.innerWidth; 
 
\t var height = window.innerHeight; 
 

 
\t can.width = width; 
 
\t can.height = height; 
 

 
} 
 

 
function redrawCanvas() { 
 
\t var can = document.getElementById("myCanvas"); 
 
\t var ctx = can.getContext("2d"); 
 

 
\t ctx.clearRect(0, 0, width, height); 
 

 
\t var width = can.width; 
 
\t var height = can.height; 
 
    
 
    // 
 
    // This is the layout function ------------------------ 
 
    // 
 
    
 
    //how many pixels per row are available? 
 
    var pixelsPerRow = height/rowCount.length; 
 
    
 
    for (var y=0;y<rowCount.length;y++) { 
 
    \t //draw the yth row: 
 
    var imagesInRow = rowCount[y]; 
 
    var pixelsPerImage = width/imagesInRow; 
 
    \t for (var x=0;x<imagesInRow;x++) { 
 
    \t \t 
 
     //now find the center of the cell defined by the 
 
     //x and y coordinates: 
 
     
 
     var xC = (x * pixelsPerImage) + (pixelsPerImage/2); 
 
     var yC = (y * pixelsPerRow) + (pixelsPerRow/2); 
 
     
 
     //now place the image in the center of the cell by offsetting half of the image's width and height: 
 
     
 
     var xI = xC - (imageWidth/2); 
 
     var yI = yC - (imageHeight/2); 
 
     
 
     //instead of drawing an image, for this example a rectangle is being drawn instead: 
 
     
 
    ctx.fillStyle = "#000"; 
 
    ctx.fillRect(xI, yI, imageWidth, imageHeight); 
 
     
 
    }  
 
    } 
 
} 
 

 
window.onresize = function() { 
 
\t setCanvasSize(); 
 
    redrawCanvas(); 
 
};

<canvas id="myCanvas"></canvas>