Fabric.js Bilder in einer Pyramide

Question

ich mit Koordinaten einige sehr nassen Code haben für eine Pyramide mit einer breiten Basis zu machen, aus der Bilder in frabric.js

ich den ganzen Tag versucht haben, in schriftlicher Form einer Schleife um erfolgreich zu sein den Code austrocknen. Ich bin ein Anfänger, also kann ich mir nicht vorstellen, wie ich das machen soll.

Bitte kann jemand helfen. Ich habe mich mit Kreisen in stoff.js umgesehen und found how to do something similar, aber ich kann nicht scheinen, es in Bilder zu übersetzen.

Die Schleife muss auch eine Zeilennummer erhöhen, damit der Fabric weiß, wann die nächste Zeile hinzugefügt werden soll.

Dies ist der schreckliche Code, den ich habe.

var canvasWidth = 1000; 
var imageWidth = 20; 
var row1 = 1; 
var a = canvasWidth/2-(imageWidth)*1/2+imageWidth*0; 
var row2 = 11; 
var b = canvasWidth/2-(imageWidth)*2/2+imageWidth*0; 
var c = canvasWidth/2-(imageWidth)*2/2+imageWidth*1; 
var row3 = 21 
var d = canvasWidth/2-(imageWidth)*3/2+imageWidth*0; 
var e = canvasWidth/2-(imageWidth)*3/2+imageWidth*1; 
var f = canvasWidth/2-(imageWidth)*3/2+imageWidth*2; 
var row4 = 31 
var g = canvasWidth/2-(imageWidth)*4/2+imageWidth*0; 
var h = canvasWidth/2-(imageWidth)*4/2+imageWidth*1; 
var i = canvasWidth/2-(imageWidth)*4/2+imageWidth*2; 
var j = canvasWidth/2-(imageWidth)*4/2+imageWidth*3; 
var row5 = 41 
var k = canvasWidth/2-(imageWidth)*5/2+imageWidth*0; 
var m = canvasWidth/2-(imageWidth)*5/2+imageWidth*1; 
var n = canvasWidth/2-(imageWidth)*5/2+imageWidth*2; 
var o = canvasWidth/2-(imageWidth)*5/2+imageWidth*3; 
var p = canvasWidth/2-(imageWidth)*5/2+imageWidth*4; 

console.log("Row1: "+a + 
      " Row2: "+ b + "," + c+ 
      " Row3: "+ d + "," + e+ ","+ f + 
      " Row4: "+ g + "," + h +","+ i + "," + j + 
      " Row5: "+ k + "," + m +","+ n + "," + o + "," + p); 

Answer 1

Um eine korrekte Schleife zu machen, sollten Sie verstehen, was Sie Iterate, hier, Sie sind Iterieren Zeilen und Zellen (Ziegel können richtige Name sein), so eine Schleife machen Sie nur Schleife in Schleife machen sollte, wie in der Tabelle:

var canvasWidth = 1000; 
 
var imageWidth = 20; 
 
var rows = []; 
 
for (var row = 1; row <= 5; row++) { // use let in es6 
 
    var cells = []; // use let in es6 
 
    rows[row - 1] = cells; 
 
    for (var cell = 0; cell <= row - 1; cell++) { // use let in es6 
 
    cells[cell] = canvasWidth/2 - (imageWidth) * row/2 + imageWidth * cell; 
 
    } 
 
} 
 
console.log(rows);