Raphael
Raphael
Решил, попробовать сделать схему проезда на Raphael framework-е
Вот что получилось
В действии
Код
<html>
<head>
<title>SVG Raphael</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="raphael.js" type="text/javascript"></script>
<script>
window.onload = function () {
var R = Raphael("map", 687, 307);
R.circle(320,170,3).attr({fill: "270-#f2c01f-#fe9400",stroke:"270-#f2c01f-#fe9400"});
var points=[{x:5,y:107},{x:10,y:112},{x:15,y:117},{x:20,y:122},{x:25,y:127},{x:30,y:132},{x:28,y:138},{x:26,y:144},{x:25,y:150},{x:25,y:156},{x:26,y:162},{x:29,y:168},{x:33,y:174},{x:38,y:179},{x:44,y:182},{x:49,y:184},{x:55,y:184},{x:62,y:183},{x:68,y:181},{x:75,y:178},{x:81,y:178},{x:86,y:183},{x:91,y:189},{x:96,y:194},{x:101,y:200},{x:106,y:205},{x:111,y:210},{x:116,y:215},{x:121,y:220},{x:126,y:225},{x:131,y:230},{x:136,y:235},{x:141,y:240},{x:146,y:235},{x:151,y:230},{x:156,y:225},{x:161,y:220},{x:166,y:215},{x:171,y:210},{x:176,y:205},{x:181,y:200},{x:186,y:195},{x:191,y:190},{x:196,y:185},{x:201,y:180},{x:207,y:175},{x:212,y:170},{x:217,y:165},{x:222,y:160},{x:227,y:155},{x:232,y:150},{x:237,y:145},{x:242,y:140},{x:247,y:135},{x:252,y:130},{x:257,y:125},{x:262,y:120},{x:267,y:114},{x:272,y:108},{x:278,y:104},{x:283,y:108},{x:288,y:112},{x:293,y:118},{x:299,y:124},{x:304,y:130},{x:310,y:135},{x:316,y:140},{x:324,y:147},{x:328,y:155},{x:332,y:159}];
/*for(var i=0;i<points.length;i++){
var c1=R.circle(points[i].x,points[i].y,2).attr({fill: "270-#f2c01f-#fe9400",stroke:"270-#f2c01f-#fe9400"});
}*/
var svgPoints=[];
(function pointsShow(){
var nPointWalked=0;
var intevalPoints=setInterval(function(){
if(nPointWalked==points.length-1){
setTimeout(opacity,10000);
clearInterval(intevalPoints);
}
svgPoints[nPointWalked]=R.circle(points[nPointWalked].x,points[nPointWalked].y,2).attr({fill: "270-#f2c01f-#fe9400",stroke:"270-#f2c01f-#fe9400"});
nPointWalked++;
},100);
function opacity(){
nPointWalked=0;
var intevalOpacity=setInterval(function(){
if(nPointWalked==points.length-1){
setTimeout(pointsShow,5000);
clearInterval(intevalOpacity);
}
svgPoints[nPointWalked].hide();
nPointWalked++;
},30);
}
})();
(function circle(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000);
setTimeout(function(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000);
},2000);
setTimeout(function(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000,function(){
circle();
});
},4000);
})();
};
</script>
<style>
#map { background-image:url('map.png');background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
В действии
Код
<html>
<head>
<title>SVG Raphael</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="raphael.js" type="text/javascript"></script>
<script>
window.onload = function () {
var R = Raphael("map", 687, 307);
var path = R.path("M5,107 L28,133 C14,163 42,198 78,176 L140,240 276,103 331,159").hide();
R.circle(320,170,3).attr({fill: "270-#f2c01f-#fe9400",stroke:"270-#f2c01f-#fe9400"});
(function car(){
var point=R.circle(5,107,3).attr({fill: "270-#f2c01f-#fe9400",stroke:"270-#f2c01f-#fe9400"});
point.animateAlong(path,7500,true,function(){
setTimeout(function(){point.hide()},1500);
setTimeout(function(){point.remove();car();},4000);
})
})();
var points=[{x:5,y:107},{x:10,y:112},{x:15,y:117},{x:20,y:122},{x:25,y:127},{x:30,y:132},{x:28,y:138},{x:26,y:144},{x:25,y:150},{x:25,y:156},{x:26,y:162},{x:29,y:168},{x:33,y:174},{x:38,y:179},{x:44,y:182},{x:49,y:184},{x:55,y:184},{x:62,y:183},{x:68,y:181},{x:75,y:178},{x:81,y:178},{x:86,y:183},{x:91,y:189},{x:96,y:194},{x:101,y:200},{x:106,y:205},{x:111,y:210},{x:116,y:215},{x:121,y:220},{x:126,y:225},{x:131,y:230},{x:136,y:235},{x:141,y:240},{x:146,y:235},{x:151,y:230},{x:156,y:225},{x:161,y:220},{x:166,y:215},{x:171,y:210},{x:176,y:205},{x:181,y:200},{x:186,y:195},{x:191,y:190},{x:196,y:185},{x:201,y:180},{x:207,y:175},{x:212,y:170},{x:217,y:165},{x:222,y:160},{x:227,y:155},{x:232,y:150},{x:237,y:145},{x:242,y:140},{x:247,y:135},{x:252,y:130},{x:257,y:125},{x:262,y:120},{x:267,y:114},{x:272,y:108},{x:278,y:104},{x:283,y:108},{x:288,y:112},{x:293,y:118},{x:299,y:124},{x:304,y:130},{x:310,y:135},{x:316,y:140},{x:324,y:147},{x:328,y:155},{x:332,y:159}];
(function circle(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000,function(){c1.remove();});
setTimeout(function(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000,function(){c1.remove();});
},2000);
setTimeout(function(){
var c1=R.circle(320,170,1).attr({"stroke-width": 1,stroke: "#fe9400"});
c1.animate({r:200,"stroke-opacity": 0},12000,function(){
circle();
c1.remove();
});
},4000);
})();
};
</script>
<style>
#map { background-image:url('map.png');background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
В действии
Ещё надо доработать (хотелось вывести гербы регионов, но прилауд изображений сделать нельзя)
В действии
Надо ещё доработать, но удалось существенно оптимизировать карту.
Сначала в редакторе Inkscape изменить размер карты. Выяснилось, что векторные редакторы не совсем так как от них ожидается меняют координаты.
Они не меняют координаты размещения, а меняю ширину и высоту изображения +убирают или добавляют некоторые дополнительные координаты если уменьшить или увеличить размер.
Inskape на 20 кб уменьшил количество координат.
Пришлось написать программу на js, которая делит координаты на нужное число.
Чуть позже размещу программу.
Итог оптимизации:
До оптимизации в ie6 изменение размера исходной карты занимало от 30 до 90 секунд.
Сейчас все необходимое время на показ карты это лишь загрузка.
Т.к. ExtJS весит не мало, то только его приходится ждать.
В действии
framework Raphael
Svg карты России из википедии
Векторный редактор Inkscape
Программа для изменения координат.
Пользоваться так - в str записываем svg координаты, в nMin указываем во сколько раз надо уменьшить.
<script>
var nMin=3;
var str = "";
var result ="";
var num='';
var find="01234567890.";
for(var i=0;i<str.length;i++){
if(find.search(str[i]) != -1){// Число
num+=str[i];
//alert(str[i]+"!=-1");
}
else{ // Не число
if(num.length!=0){
//alert(num);
result+=(num/nMin).toFixed(1);
num='';
}
result+=str[i];
}
}
alert(result);
</script>
|
Ого, здорово получилось
В последнем примере карта неправильная. Саратовская область и Башкортостан еще местами не менялись.
Там глюк какой-то примерно в середине. Выводит 77-звер107. Что за звер такой?
У меня модем сгорел, как только починю исправлю карту. Что еще интересно в Raphael, его автор сейчас работает в extjs и надеюсь он придумает много нового.
ну не совсем насколько я знаю, просто extjs и raphael теперь вместе
Да нет, автор теперь работает в Sencha, компании которая называлась Ext JS. И именно поэтому Raphaël и Ext JS теперь вместе.
Дмитрий, привет! А нет ли документации по Raphael'у на русском языке с подробным описанием примеров? Для чайников :-)
Покажите пожалуйста где код для Примера 3, а то пример есть а исходного кода нет%
исходный код огромный из-за координат.
Надо зайти на страницу с примером и в окне браузера нажать правой клавишей, выбрать "просмотр кода страницы".
Добрый день!
Подскажите пожалуйста, существует ли инструмент позволяющий скажем по контуру любого объекта выдать все координаты для фреймворка?
Анимация в Raphael жутко грузит систему. Для того чтоб в этом убедится, откройте один из примеров и запустите диспетчер задач. Есть предположение, что на старых компах анимация будет вызывать зависания браузера.
Да это скорее всего так и есть.
Но мои примеры не доделаны, нужна оптимизация кода.
У меня используются замыкания и я где то в них при каждом цикле заново определяю переменные, поэтому где-то на 10-ой минуте комп вообще начинает виснуть, постараюсь исправить. А в Карте России, вообще производится вычисление новых координат для перемещения карты в другое места и уменьшения.
Поэтому она может висеть.
Но лично я не сторонник flash и всячески стараюсь обходится без него по ряду причин:
1 - Я не умею им пользоваться.
2 - По моему мнению, компания Adobe сдерживает развитие альтернатив своим продуктам. Если бы flash не было, уже бы давно появился html5 video и audio плеер, webgl и много чего ещё.
3 - У меня нет денег на покупку их продуктов, а для России студенческих лицензий нет. На официальном сайте все ссылки для России битые, а в support отвечают, что Россия не входит в число стран, кому доступны студенческие лицензии. А использовать взломанный софт я не люблю. Лично у меня из крякнутого только XP и Office. Хотя для студентов это и так даром и я могу взять
у препода официальные студенческие ключи.
Замечание: у меня есть Flex. Его дают всем студентам. Но я не хочу тратить своё время на его изучение, я целый месяц просидел летом с actionscript и сделал вывод, что я его использовать не буду.
4 - Мне не нравится компания Adobe.
Поэтому везде где только возможно я обхожусь без flash.
Попробовал оптимизировать.
1 - сделан идеально потимизировать не получается.
3 - Можно подправить карту, сразу уменьшить размер в каком нибудь редакторе,
а остальное идеально.
2 - Вот здесь вроде можно исправить но пока не пойму как. Это и есть пример который больше всех ресурсов потребляет. Именно его сделал не правильно,
все остальные сделаны правильно.
2 - не удалось улучшить, это самый лучший способ.
3 - Карту удалось оптимизировать. Были использованы векторный редактор Inkscape и пришлось написать программу для уменьшения svg координат.
ссылки не рабочие((( очень хотелось взглянуть на исходники карты
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.