建立一个网格的圆圈与文本内部和…移动东西

Building a grid of circles with text inside and... moving things around

本文关键字：内部 文本 移动 一个 网格 建立      更新时间：2023-09-26

我正在拼命地尝试建立一个圆圈和文本里面的网格。到目前为止一切顺利，我能做到……我真正的问题是能够找到每一组并移动它周围(文本和圆圈)。我试着研究类似的问题，但我自己找不到……如果有人能给我一个提示，我将不胜感激。

下面是一个不能工作的简化代码(只有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);
            });
             }
    });

我找不到一种方法来"调用"我的集合以作进一步参考…当然，如果我只有一个set(没有array=)，它可以工作…

谢谢你的帮助!

Celfred .

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

编辑:我不确定我是否足够清楚。我想要的是能够点击1圈(和文字)，并看到这个圆圈和文字移动。如果我点击另一个，那么另一个就会移动…这听起来太简单了，我简直不敢相信我被它困住了……谢谢你的帮助。

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

代码中的问题是，当调用click回调函数时，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;
}

最后，我找到了一个转机:jsfiddle

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

我必须承认我不太明白我最初的问题。如果你至少能告诉我这个新的"解决方案"听起来是否合适，我会很感激的;-)

Celfred .

相关文章：