SVG Raphaeljs 创建矩形网格答案

【问题标题】：SVG Raphaeljs Creating a grid of rectanglesSVG Raphaeljs 创建矩形网格
【发布时间】：2015-03-09 10:35:13
【问题描述】：

我想使用 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 循环中的值，然后使用该数字来更改每个形状的放置距离，就可以输入实际的行数和列数，

如您所见，我尝试通过制定一个粗略的公式来做到这一点，但我现在卡住了，因此感谢您提供任何帮助。

【问题讨论】：

标签： html svg raphael

【解决方案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");

        }
    }
}

【讨论】：