Fabric.js 金字塔中的图像

Question

我有一些非常湿的代码，用 frabric.js 中的图像制作一个具有宽底的金字塔

我已经尝试了一整天来成功编写一个循环来干掉代码。我有点初学者，所以我无法想到如何做到这一点。

请有人帮忙。我环顾四周，found how to do something similar 在 fabric.js 中有圆圈，但我似乎无法将其翻译成图像。

循环还需要增加一个行号，因此fabric 知道何时添加下一行。

这是我的糟糕代码。

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

要制作正确的循环，您应该了解您迭代的内容，在这里，您正在迭代行和单元格（砖块可能是正确的名称），因此要制作一个循环，您应该只在循环中制作循环，就像在表格中一样：

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