Javascript.RU

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>
+5

Автор: Илья Кантор, дата: 10 августа, 2010 - 19:07
#permalink

Ого, здорово получилось


Автор: B@rmaley.e><e, дата: 10 августа, 2010 - 20:13
#permalink

В последнем примере карта неправильная. Саратовская область и Башкортостан еще местами не менялись.


Автор: Илья Кантор, дата: 11 августа, 2010 - 09:51
#permalink

Там глюк какой-то примерно в середине. Выводит 77-звер107. Что за звер такой?


Автор: mycoding, дата: 11 августа, 2010 - 17:57
#permalink

У меня модем сгорел, как только починю исправлю карту. Что еще интересно в Raphael, его автор сейчас работает в extjs и надеюсь он придумает много нового.


Автор: Falcon, дата: 20 сентября, 2010 - 14:52
#permalink

ну не совсем насколько я знаю, просто extjs и raphael теперь вместе


Автор: Dmitry Baranovskiy (не зарегистрирован), дата: 1 октября, 2010 - 03:55
#permalink

Да нет, автор теперь работает в Sencha, компании которая называлась Ext JS. И именно поэтому Raphaël и Ext JS теперь вместе.


Автор: Azadi, дата: 1 октября, 2010 - 10:13
#permalink

Дмитрий, привет! А нет ли документации по Raphael'у на русском языке с подробным описанием примеров? Для чайников :-)


Автор: Гость (не зарегистрирован), дата: 17 августа, 2010 - 06:08
#permalink

Покажите пожалуйста где код для Примера 3, а то пример есть а исходного кода нет%


Автор: mycoding, дата: 17 августа, 2010 - 08:35
#permalink

исходный код огромный из-за координат.
Надо зайти на страницу с примером и в окне браузера нажать правой клавишей, выбрать "просмотр кода страницы".


Автор: dom (не зарегистрирован), дата: 6 ноября, 2010 - 13:08
#permalink

Добрый день!
Подскажите пожалуйста, существует ли инструмент позволяющий скажем по контуру любого объекта выдать все координаты для фреймворка?


Автор: FINoM, дата: 2 января, 2011 - 04:21
#permalink

Анимация в Raphael жутко грузит систему. Для того чтоб в этом убедится, откройте один из примеров и запустите диспетчер задач. Есть предположение, что на старых компах анимация будет вызывать зависания браузера.


Автор: mycoding, дата: 4 января, 2011 - 17:00
#permalink

Да это скорее всего так и есть.
Но мои примеры не доделаны, нужна оптимизация кода.
У меня используются замыкания и я где то в них при каждом цикле заново определяю переменные, поэтому где-то на 10-ой минуте комп вообще начинает виснуть, постараюсь исправить. А в Карте России, вообще производится вычисление новых координат для перемещения карты в другое места и уменьшения.
Поэтому она может висеть.
Но лично я не сторонник flash и всячески стараюсь обходится без него по ряду причин:
1 - Я не умею им пользоваться.
2 - По моему мнению, компания Adobe сдерживает развитие альтернатив своим продуктам. Если бы flash не было, уже бы давно появился html5 video и audio плеер, webgl и много чего ещё.
3 - У меня нет денег на покупку их продуктов, а для России студенческих лицензий нет. На официальном сайте все ссылки для России битые, а в support отвечают, что Россия не входит в число стран, кому доступны студенческие лицензии. А использовать взломанный софт я не люблю. Лично у меня из крякнутого только XP и Office. Хотя для студентов это и так даром и я могу взять
у препода официальные студенческие ключи.
Замечание: у меня есть Flex. Его дают всем студентам. Но я не хочу тратить своё время на его изучение, я целый месяц просидел летом с actionscript и сделал вывод, что я его использовать не буду.
4 - Мне не нравится компания Adobe.

Поэтому везде где только возможно я обхожусь без flash.


Автор: mycoding, дата: 10 января, 2011 - 11:44
#permalink

Попробовал оптимизировать.
1 - сделан идеально потимизировать не получается.
3 - Можно подправить карту, сразу уменьшить размер в каком нибудь редакторе,
а остальное идеально.
2 - Вот здесь вроде можно исправить но пока не пойму как. Это и есть пример который больше всех ресурсов потребляет. Именно его сделал не правильно,
все остальные сделаны правильно.

2 - не удалось улучшить, это самый лучший способ.

3 - Карту удалось оптимизировать. Были использованы векторный редактор Inkscape и пришлось написать программу для уменьшения svg координат.


Автор: Гость (не зарегистрирован), дата: 25 февраля, 2013 - 13:24
#permalink

ссылки не рабочие((( очень хотелось взглянуть на исходники карты


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
8 + 9 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum