金字塔中的Fabric.js图像

Question

I have some very wet code with coordinates for to make a pyramid with a wide base, out of images in frabric.js

I have tried all day to succeed in writing a loop to dry up the code. I'm somewhat of a beginner, so I cannot get it into my head how to do this.

Please can someone help. I've looked around and found how to do something similar with circles in fabric.js, but I can't seem to translate it into images.

The loop also needs to increment a row number, so fabric knows when to add the next row.

This is the terrible code I have.

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

To make correct loop you should understand what you Iterate, here, you are iterating rows and cells (bricks may be correct name), so to make a loop you should just make loop in loop, like in table:

 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);