javascript - Raphael 和集合内的目标节点

Question

我有一组拉斐尔图像，它们被随机放置在 Canvas 上。我希望这些图像中的每一个都有翻转，但我认为我的语法错误:(有什么想法吗？

JSFiddle:http://jsfiddle.net/neuroflux/VS6gT/1/ (编辑以包含库)

代码片段:

for (var i = 0; i <= a; i++) {
                    var ax = Math.floor(Math.random() * dw) + 1;
                    var ay = Math.floor(Math.random() * dh) + 1;
                    var ao = Math.floor(Math.random() * 10) + 1;
                    var ac = Math.floor(Math.random() * 4) + 1;
                    if (ac == 1) { col = 'earth.gif'; } else 
                    if (ac == 2) { col = 'jupiter.gif'; } else 
                    if (ac == 3) { col = 'neptune.gif'; }
                    var planetName = nameGen();
                    st.push = (
                        planet = r.image(col, ax,ay,ac,ac).attr({
                            'fill':'#fff',
                            'opacity':'0.'+ao,
                            'stroke-width':0,
                            'cursor':'pointer'
                        }).id = planetName
                    );
                }

st.mouseover(function() {
                    if (info) { info.remove(); }
                    this.node.animate({
                        'scale':30
                    }, 250);
                    this.animate({
                        'rotation':999
                    }, 25000);
                    info = r.rect(5,5,200,150).attr({
                        'fill':'#fff',
                        'stroke':'#ff0000'
                    });
                    infoText = r.text(75,25,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
                        'font-size':14
                    });
                }).mouseout(function() {
                    this.animate({
                        'scale':1
                    }, 250);
                });

Answer 1

似乎将事件附加到集合中不起作用，但您可以在创建它们时将它们直接附加到行星:

var planet = r.image(col, ax,ay,ac,ac).attr({
        'fill':'#fff',
        'opacity':'0.'+ao,
        'stroke-width':0,
        'cursor':'pointer'
});
planet.id = planetName;
st.push = planet;
planet.mouseover(function() {
    if (info) { info.remove(); }
    this.animate({
        'scale':30
    }, 250);
    this.animate({
        'rotation':999
    }, 25000);
    info = r.rect(5,5,200,150).attr({
        'fill':'#fff',
        'stroke':'#ff0000'
    });
    infoText = r.text(75,25,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
        'font-size':14
    });
}).mouseout(function() {
    this.animate({
        'scale':1
    }, 250);
    });
}

我唯一需要更改的另一件事是将 this.node.animate 更改为 this.animate，then it seems to be working .