VPF::Вывести нумерацию элементов массива

superazer

Дата 28.11.2012, 12:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 21.11.2012

Репутация: нет
Всего: нет

Уважаемые форумчане, помогите вывести нумерацию участков на генплане http://iskoski.ru/village/turgenevo/masterplan Реализовано на raphael.js,
для меня это неразрешимая проблема. Собрал всю конструкцию по мануалам и урокам, а самому дописать не хватает опыта.
Здесь код отвечающий за вывод

Код


var colors = {"1":"#1A450A","2":"#B4140C","3":"#ffae00","4":"#2679D5"};
var colors_hover = {"1":"#3DA316","2":"#B4140C","3":"#F1F801","4":"#9AC1ED"};
$(function(){
    
    var r = Raphael('mapt', 800, 445),
        attributes = {
            fill: '#808080',
            opacity: 0.9,
            transform: ("s1"),
            stroke: '#000000',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        },
    arr = new Array();
    objs = new Array();
    for (var country in paths) {
        
        var obj = r.path(paths[country].path);
        
        obj.attr(attributes);
        if(states[country])
            obj.attr('fill',colors[states[country]]);
            
        objs[country] = obj;
        arr[obj.id] = country;
        
        obj
        .hover(function(){
            if(states[paths[arr[this.id]].name])
                fill = colors_hover[states[paths[arr[this.id]].name]];
            else
                fill = '#C0C0C0';
                
            this.animate({
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill,
                opacity: 0.4,
                transform: ("s1")
            }, 300);
            $('div#regions').scrollTo( 'li#reg' + paths[arr[this.id]].name, 100 );
            $('li#reg' + paths[arr[this.id]].name).addClass('active');
            document.location.hash = arr[this.id];
            $('.point')
            .html(paths.name);
            
            
        }, function(){
            
            if(states[paths[arr[this.id]].name])
                fill = colors[states[paths[arr[this.id]].name]];
            else
                fill = attributes.fill;
                
            this.animate({
                opacity: 0.9,
                stroke: '#000000',
            'stroke-width': 0,
            'stroke-linejoin': 'round',
                fill: fill,
                transform: ("s1")
            }, 700);
            $('li#reg' + paths[arr[this.id]].name).removeClass('active');
            
        })
/*!        .click(function(){
            document.location.hash = arr[this.id];
            
            var point = this.getBBox(0);
            
            $('#mapt').next('.point').remove();
            
            $('#mapt').after($('<div />').addClass('point'));
            
            $('.point')
            .html(paths[arr[this.id]].name)
            .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
            .prepend($('<img />').attr('src', '/netcat_files/flags/'+arr[this.id]+'.png'))
            .css({
                left: point.x+(point.width/2)-20,
                top: point.y+(point.height/2)-20
            })
            .fadeIn();
                        
        });
        
        $('.point').find('.close').live('click', function(){
            var t = $(this),
                parent = t.parent('.point');
            
            parent.fadeOut(function(){
                parent.remove();
            });
            return false;
        });
*/
        $('div#regions ul li').unbind('mouseenter mouseleave');
        $('div#regions ul li').hover(function(){
            
            reg_id = $(this).attr('id').substr(3);
            $('li#reg' + reg_id).addClass('active');
            
            var obj = objs[reg_id];
            if(states[reg_id])
                fill = colors_hover[states[reg_id]];
            else
                fill = '#C0C0C0';
                
            obj.animate({
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill,
                opacity: 0.4,
                scale: 1
            }, 300).toFront();
            
        }, function(){
            reg_id = $(this).attr('id').substr(3);
            $('li#reg' + reg_id).removeClass('active');
            var obj = objs[reg_id];
            var fill = '';
            if(states[reg_id])
                fill = colors[states[reg_id]];
            else
                fill = attributes.fill;
                    
            obj.animate({
                opacity: 0.9,
                scale: 1,
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill
            }, 300);
        })
         
        
    }
        
            
});

здесь координаты участков

Код


var states = Array();
var paths = {
    1: {
        name: '1',
        path: 'M 449.344,365.086 511.449,351.17 512.136,353.818 506.061,371.494 460.448,381.952 z'
    },
    2: {
        name: '2',
        path: 'M 430.821,334.743 459.939,328.32 479.088,356.795 448.332,363.49 z'
    },
    3: {
        name: '3',
        path: 'M 461.781,327.904 482.852,323.169 505.084,331.591 510.967,349.465 481.014,356.364 z'
    },
    4: {
        name: '4',
        path: 'M 476.423,287.836 526.403,289.897 529.908,304.812 479.29,302.551 z'
    },
    5: {
        name: '5',
        path: 'M 471.123,264.751 489.271,243.078 496.966,237.743 504.918,246.122 517.684,269.828 471.736,268.027 z'
    },
    6: {
        name: '6',
        path: 'M 546.01,186.539 569.035,186.682 593.084,186.778 576.273,208.447 554.427,208.267 z'
    }
    
}

Буду рад помощи и с благодарностью приму любые предложения

Это сообщение отредактировал(а) superazer - 26.8.2013, 22:36

Sanchezzz

Дата 28.11.2012, 17:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

С пометкой new это то что добавлено для вывода name из массива
Рекомендую x и y завести в этом же массиве что бы не делать кучу условий в switch ниже по коду увидишь.

Код


var colors = {"1":"#1A450A","2":"#B4140C","3":"#ffae00","4":"#bf0000"};
var colors_hover = {"1":"#3DA316","2":"#B4140C","3":"#F1F801","4":"#F0B13C"};
// new
var text_attr = {font:'12px Verdana','font-size':12,'text-anchor':'start','color':'#ccc'};

$(function(){
    
    var r = Raphael('mapp', 800, 445),
        attributes = {
            fill: '#808080',
            opacity: 0.9,
            transform: ("s1"),
            stroke: '#000000',
            'stroke-width': 0,
            'stroke-linejoin': 'round'
        },
    arr = new Array();
    objs = new Array();
    for (var country in paths) {
        
        var obj = r.path(paths[country].path);
        // new
        var len = obj.getTotalLength();
        console.log(len);
        newP =  obj.getPointAtLength(len);
        var tx ,ty;
        switch(paths[country].name){
            case '1':  tx = newP.x -5;  ty=newP.y+8;  break
            case '12': tx = newP.x -40;  ty=newP.y+15; break
            case '18': tx = newP.x +15;  ty=newP.y-2;  break
            default:   tx = newP.x -15;  ty=newP.y+8;  break
        }
        text =  r.text( tx, ty, paths[country].name).attr(text_attr).rotate(50);        
        // new    
                    
        obj.attr(attributes);
        if(states[country])
            obj.attr('fill',colors[states[country]]);
            
        objs[country] = obj;
        arr[obj.id] = country;
        
        obj
        .hover(function(){
            if(states[paths[arr[this.id]].name])
                fill = colors_hover[states[paths[arr[this.id]].name]];
            else
                fill = '#C0C0C0';
                
            this.animate({
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill,
                opacity: 0.4,
                transform: ("s1")
            }, 300);
            $('div#regions').scrollTo( 'li#reg' + paths[arr[this.id]].name, 100 );
            $('li#reg' + paths[arr[this.id]].name).addClass('active');
            document.location.hash = arr[this.id];
            $('.point')
            .html(paths.name);
            
            
        }, function(){
            
            if(states[paths[arr[this.id]].name])
                fill = colors[states[paths[arr[this.id]].name]];
            else
                fill = attributes.fill;
                
            this.animate({
                opacity: 0.9,
                stroke: '#000000',
            'stroke-width': 0,
            'stroke-linejoin': 'round',
                fill: fill,
                transform: ("s1")
            }, 700);
            $('li#reg' + paths[arr[this.id]].name).removeClass('active');
            
        })
/*!        .click(function(){
            document.location.hash = arr[this.id];
            
            var point = this.getBBox(0);
            
            $('#mapt').next('.point').remove();
            
            $('#mapt').after($('<div />').addClass('point'));
            
            $('.point')
            .html(paths[arr[this.id]].name)
            .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
            .prepend($('<img />').attr('src', '/netcat_files/flags/'+arr[this.id]+'.png'))
            .css({
                left: point.x+(point.width/2)-20,
                top: point.y+(point.height/2)-20
            })
            .fadeIn();
                        
        });
        
        $('.point').find('.close').live('click', function(){
            var t = $(this),
                parent = t.parent('.point');
            
            parent.fadeOut(function(){
                parent.remove();
            });
            return false;
        });
*/
        $('div#regions ul li').unbind('mouseenter mouseleave');
        $('div#regions ul li').hover(function(){
            
            reg_id = $(this).attr('id').substr(3);
            $('li#reg' + reg_id).addClass('active');
            
            var obj = objs[reg_id];
            if(states[reg_id])
                fill = colors_hover[states[reg_id]];
            else
                fill = '#C0C0C0';
                
            obj.animate({
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill,
                opacity: 0.4,
                scale: 1
            }, 300).toFront();
            
        }, function(){
            reg_id = $(this).attr('id').substr(3);
            $('li#reg' + reg_id).removeClass('active');
            var obj = objs[reg_id];
            var fill = '';
            if(states[reg_id])
                fill = colors[states[reg_id]];
            else
                fill = attributes.fill;
                    
            obj.animate({
                opacity: 0.9,
                scale: 1,
                stroke: '#000000',
                'stroke-width': 0,
                'stroke-linejoin': 'round',
                fill: fill
            }, 300);
        })
         
        
    }
        
            
});

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

superazer

Дата 28.11.2012, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 21.11.2012

Репутация: нет
Всего: нет

Спасибо огроменное, Sanchezzz за помощь оперативную, появилась нумерация! .attr(text_attr).rotate(50) - только убрал.
Один вопрос только есть ещё: - сейчас номера участков перебивают события мыши для path, для http://art-tri.ru/village/podmoskovnoye/genplan/ это особо не играет роли, а вот для http://art-tri.ru/village/turgenevo/masterplan/ играет роль. Возможно ли сквозь text пропускать событие для path (может назначить ему .toBack() как нибудь). Готовое решение или совет - все будет хорошо!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »