Применить событие Hover в Рафаэле на множестве путей - PullRequest
Новая
       24

Применить событие Hover в Рафаэле на множестве путей

3 голосов
/ 14 ноября 2011

Когда я помещаю событие hover в набор Raphael, эффект применяется на каждом другом пути.Поэтому, когда я прохожу путь, он изменяет заполнение этого единственного пути, а не заполнение всего набора в одно и то же время.

Например, на этой карте, когда вы проходите через Канаду смышь, материк меняет свой цвет, но все ледяные острова остаются одного цвета.

Это мой код. 

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(
                path
            );
        }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);

        setset.hover(function(){
            this.animate({
                fill: '#000'
            }, 300);
        }, function(){
        this.animate({
            fill: attributes.fill
        }, 300);
    });

    }   
},

Я использую метод анимации Рафаэля.

Есть идеи, как мне решить эту проблему?

И вот еще один вопрос, содержащий этот вопрос.

Может кто-нибудь прояснить документацию Рафаэля?(или знать место, в котором кто-то уже это сделал)

1 Ответ

7 голосов
/ 15 ноября 2011

Это старая проблема, когда событие, которое вы используете для выделения, не относится к объекту, который вы считаете. В частности, это ссылка.

Сейчас полночь, я устал и я испортил твой код. Вот что я сделал

Создайте объект, чтобы обернуть ваш набор путей, и настройте событие наведения мыши, чтобы сослаться на набор объектов. Волшебство здесь в том, что при использовании ссылки на переменную объекта событие будет заблокировано для него, и все будет работать.

Итак. Вот объект. Я положил его в верхней части mapclasses.js 

function setObj(country,myset)
{
    var that = this;
    that.country = country;
    that.myset = R.set();

    that.setupMouseover = function()
    {
        that.myset.mouseover(function(event){
            myvar = that;   
            // in the mouseover, we're referring to a object member that.myset
            // the value is locked into the anonymous object
            that.myset.attr({"fill":"#ffaa00"});
        });
    }

    that.addPath = function(newpath)
    {
       that.myset.push(newpath); 
    }

    return that;
}

Затем в функции drawSets (строка 80) 

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
                    var holderObj = null;
                    //
                    // Create an object to hold all my paths
                    //
                    if (country == 'canada')
                    {
                       holderObj = setObj (country, setset);
                    }
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(path);
                            if (country == 'canada')
                            {
                               // add the path to the holder obj
                               holderObj.addPath(path);
                            }
        }

                    if (country == 'canada')
                    {
                       // once all paths for the object are loaded, create a mouseover
                       // event
                       holderObj.setupMouseover();
                    }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);



    }   
}

Примечание: я сделал это только для Канады. Кроме того, я только применил наведение мыши. Это должно быть тривиально для вас, чтобы применить связанную мышку. Также вам понадобится объект для каждой страны, который вы, вероятно, захотите сохранить.

Извините, это не понятно. Как я уже сказал, уже поздно. Если вы хотите, я могу отправить вам измененный файл js или прикрепить его в Dropbox, но это, вероятно, противоречит духу StackOverflow.

Если у вас есть какие-либо проблемы с этим, спросите, и я постараюсь помочь.

Удачи.

...