Question

我有一些非常潮湿的代码，带有坐标，可以用frabric.js中的图像制作一个宽底座的金字塔

我一整天都试图成功编写一个循环来干掉代码。我有点像初学者，所以我无法理解如何做到这一点。

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

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

这是我的可怕代码。

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

Fabric.js金字塔中的图像

1 个答案: