集合中的Raphael和定位节点

问题描述

| 我在画布上随机放置了ѭ0的Raphael图片。我希望每个图像都有一个过渡，但是我认为语法错误:(有什么想法吗？ 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);
                });

    

解决方法

        将事件附加到集合似乎无效，但是您可以在创建事件时将它们直接附加到行星上：

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

，这似乎很有效。