Question

下面的代码将绘制48个方块，其中包含数字0到47 我已经阅读了stackoverflow，使用集合是最好的方法，因为我将矩形形状与其文本编号分组在一起所以我可以用location引用它们我有很多位置，所以我想将它们放在名为locations的数组中因此locations[]数组是一个矩形列表（它们本身就是集合），其中包含数字。

window.onload = function() {  
var paper = new Raphael(document.getElementById('canvas_container'), 1200, 1000);  
var locations = []; 
var location = paper.set();

//squares have same width and height.
var width = 12;

// draw 48 locations
for (i=0; i<48;i++) {
    location.push(paper.rect(width*(i+1),10, width, width));
    location.push(paper.text(width*(i+1)+(width/2),width+(width/3),i).attr({ "font-size": 8, "font-family": "Arial, Helvetica, sans-serif" }));

    locations[i] = location;
    location.length = 0; //clears the set
}

//locations[9].translate(Math.random() * 350, Math.random() * 380);

}

问题是最后一行。如果我取消注释，所有48个盒子将被翻译并一起移动。我想做的就是移动第10个方格我的阵列显然做错了，我如何填充它们但我不知道。

Answer 1

for循环中的最后一行未清除设置。您已构建位置数组，其中每个项目包含2 * 48个元素（rect和text）。您可以通过console.log(locations[0]);看到这一点，因为该变换可以移动所有内容。

重新排列，以便每个数组项只包含一对（rect，text）：

window.onload = function() {  

var paper = new Raphael('canvas_container', 1200, 1000);  
var locations = []; 
var location = paper.set();

function Item(elem, text) {
    this.elem = elem;
    this.text = text;
}

//squares have same width and height.
var width = 12;

var item;

for (var i = 0; i < 5; i++) {

    item = new Item(
            paper.rect(width * (i+1), 10, width, width),
            paper.text(width * (i+1) + (width/2), width + (width/3), i).attr({ "font-size": 8, "font-family": "Arial, Helvetica, sans-serif" })
        );

    locations[i] = item;
}

location = paper.set();
location.push(locations[3].elem);
location.push(locations[3].text);

location.translate(Math.random() * 350, Math.random() * 380);

}

随机选择

Demo at fiddle和update。

如何在Raphael中创建一组集合？

1 个答案: