Question

我拼命想要在里面建立一个带圆圈和文字的网格。到目前为止，我能做到这一点......我真正的问题是能够找到每一组并移动它（文本和圆圈）。我试图看看类似的问题，但我自己也找不到......如果有人能给我一些线索，我会非常感激。

这是一个不起作用的简化代码（只有1行）：

$(function() {
        // Prepare drawing zone
        var paper = Raphael(document.getElementById('question'), '100%', '100%');

        var word = 'Sunday';

        var group = new Array();
        // Draw 5 circles with text inside
        for (i=0; i<5; i++) {
            group[i] = paper.set();
            group[i].push(paper.circle(50+i*60, 50, 30));
            group[i].push(paper.text(50+i*60, 50, word));

            group[i].click(function() {
                group[i].translate(20,20); // HERE'S THE PROBLEM group[i] DOESN'T WORK !
                group[i].rotate(Math.random() * 90);
            });
             }
    });

我无法找到一种“召唤”我的套装以供进一步参考的方法...... 当然，如果我只有一组（并且没有数组=，它可以工作......

感谢您的帮助！

Celfred。

编辑：jsfiddle：http://jsfiddle.net/rrWqM/

编辑：我不确定我是否足够清楚。我想要的是能够点击1个圆圈（和文本），并看到这个圆圈和文本移动。如果我点击另一个，那么另一个移动......听起来很简单我不敢相信我被困在那...感谢你的帮助。

Answer 1

这是[小提琴] [http://jsfiddle.net/DusKv/1/]

代码中的问题是，当调用单击回调函数时，i变量没有正确的值。您可以通过在封闭范围内定义局部变量来解决此问题。

// Prepare drawing zone
var paper = Raphael(document.getElementById('question'), '100%', '100%');

var word = 'Sunday';

var group = new Array();
// Draw 10 circles with text inside
for (i = 0; i < 10; i++) {
    var set = paper.set();
    set.push(paper.circle(50 + i * 30, 50, 50));
    set.push(paper.text(50 + i * 30, 50, word));

    set.click(function() {
        set.translate(Math.random() * 350, Math.random() * 380); // HERE'S THE PROBLEM group[i] DOESN'T WORK !
        set.rotate(Math.random() * 90);
    });
    group[i] = set;
}

Answer 2

最终，我发现了这种转变方式：jsfiddle

现在我在点击事件中得到了正确的引用。

我必须承认我不太了解我最初的问题。如果你至少可以告诉我这个新的“解决方案”对你来说是否合适，我会很感激; - ）

Celfred。

建立一个带有文本内部的圆圈网格......移动物体

2 个答案: