Рафаэль и целевые узлы в наборе - PullRequest
Новая
       25

Рафаэль и целевые узлы в наборе

0 голосов
/ 29 мая 2011

У меня есть set изображений Рафаэля, которые произвольно помещаются на холст. Мне бы хотелось, чтобы каждое из этих изображений имело ролловер, но я думаю, что у меня неправильный синтаксис :( Есть идеи?

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);
                });

1 Ответ

2 голосов
/ 30 мая 2011

Кажется, что прикрепление событий к набору не работает, но вы можете прикрепить их непосредственно к планетам при их создании: 

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, , тогда, похоже, оно работает .

...