SVG Raphaeljs创建一个矩形网格

Question

我想使用SVG Raphaeljs创建一个用户定义的矩形网格。我现在使用的方法接近我想要的方法，但显然不对。

截至目前我的代码：

创建矩形并尝试将它们放置在彼此相等距离的均匀网格中

function startup() {
var paper = Raphael(50, 50, 1500, 875);
for (var i = 0; i <= 7; i++) {
    for (var j = 0; j <= 4; j++) {

        var offset = i; // Stores the number to remove from the next variable to keep an even distance between shapes
        var moveRight = (i + 20 - offset) * i; // new variable stores the amount to move the next rectangle along by adding 20 (distance in pixels
        // to move to the right) to the loop counter i and then subtracting the offset which is the variable i
        // before the + 20 was added and then multiplying it all by i again.
        var moveDown = (j + 35 - offset) * j;


        var c = paper.rect(moveRight, moveDown, 15, 20);

        c.attr("fill", "#f00");
        c.attr("stroke", "#fff");
    }
}

}

由于我的编码很差，上面目前产生了这个不稳定的网格。

我需要这样工作，用户可以通过编辑我放入for循环的值然后使用该数字来改变每个形状的放置距离来输入实际的行数和列数， / p>

正如你所看到的那样，我试图通过制作一个粗略的公式来做到这一点，但我现在陷入困境，所以任何帮助都会受到赞赏。

Answer 1

好的，我很傻。我注意到了一个错误，我将代码修改为以下内容：

function startup() {
    var paper = Raphael(50, 50, 1500, 875);
    for (var i = 0; i <= 7; i++) {
        for (var j = 0; j <= 4; j++) {

            var offseti = i; // Stores the number to remove from the next variable to keep an even distance between shapes
            var moveRight = (i + 20 - offseti) * i; // new variable stores the amount to move the next rectangle along by adding 20 (distance in pixels
            // to move to the right) to the loop counter i and then subtracting the offset which is the variable i
            var offsetj = j; // before the + 20 was added and then multiplying it all by i again.
            var moveDown = (j + 25 - offsetj) * j;


            var c = paper.rect(moveRight, moveDown, 15, 20);

            c.attr("fill", "#f00");
            c.attr("stroke", "#fff");

        }
    }
}