Как в Raphael. JS (считать цвет кисти для каждого элемента в цикле)

@ufaclub · Регистрация: 16.02.2013

Студворк — интернет-сервис помощи студентам

Живой пример:

http://jsfiddle.net/ufaclub/asje4eu7/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
    <script type="text/javascript">
 
jQuery(document).ready(function(){
 
    var R = Raphael("mapPaper", 780, 463);
    
    var attr = {
        stroke: "#74675C",
        "stroke-width": 1,
        fill: "#FC0",
        "fill-opacity": 0.2
    },
    i = 1,
    area = {};
    
    
    
    
    var oAreas = $(".mapArea");
 
    
    $.each(oAreas, function(){
        area[i] = R.path($(this).attr("data-path")).attr(attr);
        i++;
    });
    
    
 
    for (var j=1; j<i; j++) {
        (function (o, j) {
            o[0].style.cursor = "pointer";
            o[0].onmouseover = function () {
                var color = "#FCE588";
                o.animate({fill:color}, 250);
            };
            o[0].onmouseout = function () {
                var color = "#FC0";
                o.animate({fill: color}, 250);
            };
            o[0].onclick = function () {
                var color = "#F00";
                o.animate({fill: color}, 250);
            };
        })(area[j], j);
    }
 
}); 
 
</script>

PHP
1
2
3
4
5
6
7
<div class="map" id="mapPaper">
    <div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>
    <div class="mapArea" data-path="M3,398,153,398,153,332,231,332,231,213,153,213,153,78,3,78z"></div>
    <div class="mapArea" data-path="M263,8,370,8,370,212,154,212,154,48,263,48z"></div>
    <div class="mapArea" data-path="M371,8,480,8,480,48,582,48,582,212,371,212z"></div>
    <div class="mapArea" data-path="M773,80,774,399,670,399,670,460,560,460,559,288,488,288,488,213,582,212,583,79z"></div>
</div>

Вот этот код задает цвет кисточки что будет создавать фигуры

JavaScript
1
2
3
4
5
6
7
8
var attr = {
        stroke: "#74675C",
        "stroke-width": 1,
        fill: "#FC0",
        "fill-opacity": 0.2
    },
    i = 1,
    area = {};

а вот этот код считывает координаты в цикле из html кода вида

JavaScript
1
2
3
4
5
6
7
8
    
    var oAreas = $(".mapArea");
 
    
    $.each(oAreas, function(){
        area[i] = R.path($(this).attr("data-path")).attr(attr);
        i++;
    });

PHP
1
<div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>

МНЕ НУЖНО ЗАМЕНИТЬ ВОТ ЭТОТ КОД

JavaScript
1
2
3
4
5
6
7
8
var attr = {
        stroke: "#74675C",
        "stroke-width": 1,
        fill: "#FC0",
        "fill-opacity": 0.2
    },
    i = 1,
    area = {};

на другой, код должен считывать данные аналогично data-path

например назвать его status-path

Пример HTML кода

PHP
1
2
3
4
5
6
7
8
<div class="mapArea" status-path='stroke: "#74675C", "stroke-width": 1, fill: "#FC0", "fill-opacity": 0.2' data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>
 
 
<div class="mapArea" status-path='stroke: "#423234", "stroke-width": 3, fill: "#FFF", "fill-opacity": 0.3' data-path="M435,450,371,256,342,255,3232,322,154,23,154,398,150,399,110,460z"></div>
 
...............................
 
и так далее.

@ludmila-sv · 20.09.2014, 18:00

Сообщение от ufaclub

а вот этот код считывает координаты в цикле из html кода вида

собственно считывает только вот этот кусок

JavaScript
1
$(this).attr("data-path")

А остальное - рисует по этим координатам фигуру и закрашивает так, как определено в переменной attr.
Вам же нужно считать данные из status-path ($(this).attr("status-path")), записать их в какую-нибудь переменную, а потом использовать их при закрашивании фигуры:

JavaScript
1
2
3
4
5
$.each(oAreas, function(){
        var statuspath = $(this).attr("status-path");
        area[i] = R.path($(this).attr("data-path")).attr(statuspath);
        i++;
    });

@ufaclub · 21.09.2014, 01:06 **[ТС]**

ludmila-sv сделал как вы сказали. Но не работает. Подскажите где ошибка.

http://jsfiddle.net/asje4eu7/7/

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@ufaclub 0 / 0 / 0 Регистрация: 16.02.2013 Сообщений: 56
	21.09.2014, 01:06 [ТС]
	ludmila-sv сделал как вы сказали. Но не работает. Подскажите где ошибка. http://jsfiddle.net/asje4eu7/7/ 0