Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2013, 18:51
Новичок на форуме
Отправить личное сообщение для kumar6346 Посмотреть профиль Найти все сообщения от kumar6346
 
Регистрация: 28.05.2011
Сообщений: 5

Анимация прорисовки линии на Raphael
Здравствуйте уважаемые форумчане! Сейчас делаю проект к котором нужно реализовать прорисовку линий на рафаэле. Т.е суть такова что бы в поле рисовались разные линии от прямых до безье и т.п. Я это реализовал ниже привожу код который я написал для прорисовки одной линии

var r = Raphael(0, 0, width_window, height_window);
	
	
    var p = r.path('M0 0 2000 0').attr("stroke","none");
    var p2 = r.path("M0 541").attr({
		"stroke-width": 2,
		"stroke": "#009dce"
	});	
    var e = r.ellipse(0, 541, 4, 4).attr("stroke","none");
	
    e.animateAlong(p, 3000, true).onAnimation(function() {
        p2.attr("path", p2.attr("path").concat([["L", e.attr("cx"), e.attr("cy")]]));
    });


Код рабочий линии прорисовываются НО
1. В ИЕ (иногда хром) линии в местах скругления становятся ломанными.
2. Все жутко тормозит во всех браузерах

Подскажите как мне быть с моими проблемами что сделать может кто то сможет подсказать другой вариант рисований линии?? Помогите пожалуйста!
Ответить с цитированием
  #2 (permalink)  
Старый 12.07.2013, 19:04
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

а просто в канвасе без рафаеля не пробовали нарисовать?
Ответить с цитированием
  #3 (permalink)  
Старый 12.07.2013, 20:01
Новичок на форуме
Отправить личное сообщение для kumar6346 Посмотреть профиль Найти все сообщения от kumar6346
 
Регистрация: 28.05.2011
Сообщений: 5

vadim5june,
а можете подсказать как на канвасе такое сделать? Привести примеры
Ответить с цитированием
  #4 (permalink)  
Старый 12.07.2013, 21:02
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Вот здесь на английском языке про канвас
https://developer.mozilla.org/en-US/...anvas_tutorial
вот здесь конкреьно линии круги кривые Безье
https://developer.mozilla.org/ru/doc...Drawing_shapes
где то у них же есть и на русском
события не поддерживаются
рафаэль работает с канвасом и SVG

Последний раз редактировалось vadim5june, 12.07.2013 в 21:04.
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2013, 14:06
Новичок на форуме
Отправить личное сообщение для kumar6346 Посмотреть профиль Найти все сообщения от kumar6346
 
Регистрация: 28.05.2011
Сообщений: 5

Так написал кое что другое стало работать намного лучше и быстрее но в ие8 анимации нет в ие9++ анимация есть. Вот код скажите пожалуйста почему не работает анимация в ие

$(function() {
				animateLine = function(canvas, colorNumber, pathString) {

						var line = canvas.path(pathString).attr({
							stroke: colorNumber
						});
						var length = line.getTotalLength();

						$('path[fill*="none"]').animate({
							'to': 1
						}, {
							duration: 3000,
							step: function(pos, fx) {
								var offset = length * fx.pos;
								var subpath = line.getSubpath(0, offset);
								canvas.clear();
								canvas.path(subpath).attr({
									stroke: colorNumber
								});

							},
						});
				};
				var width_window = $(window).width(), 
					height_window = $(window).height(),
					pathString = "m 37.142857,169.50504 c 0,0 185.714283,-91.428572 218.571433,-57.14286 32.85714,34.28572 68.57142,120 68.57142,120";
					
				var canvas = Raphael('canvas', width_window, height_window);
				animateLine(canvas, "#000", pathString);

			});
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2013, 14:49
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

в ie8 канвас не поддерживается возможно рафаедь должен иммитировать или заменять на SVG
есть гугловская библиотека excanvas.js. для ie =правда я с ней не работал
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2013, 15:24
Новичок на форуме
Отправить личное сообщение для kumar6346 Посмотреть профиль Найти все сообщения от kumar6346
 
Регистрация: 28.05.2011
Сообщений: 5

ексканвас подключал ничего не изменилось(
Ответить с цитированием
  #8 (permalink)  
Старый 28.12.2014, 20:21
Новичок на форуме
Отправить личное сообщение для smat Посмотреть профиль Найти все сообщения от smat
 
Регистрация: 07.08.2013
Сообщений: 6

Если еще актуально - попробуйте вот так.
Работает в том числе и в IE8.
Суть этого способа в добавлении к элементам "path" нового атрибута "length" с последующей его анимацией:
window.onload = function(){
	var paper = Raphael(document.getElementById("holder"), "100%", "100%");	
	
	var p1 = "M38 27c14,83 82,173 184,114 102,-60 -97,-44 -73,-82 25,-37 196,-37 259,-1 63,36 64,63 64,63",	
		p2 = "M23 157c0,-42 -34,-135 102,-118 136,17 -34,89 -22,128 12,39 87,51 225,-8 137,-58 51,-81 -27,-97 -77,-17 -143,28 -110,67 34,38 279,35 279,35",  
		line1,
		line2; 	
	
	// для элементов "path" добавляем новый атрибут "length", который может быть от 0 до getTotalLength
	// кроме того в каждом элементе "path" в параметре data("total-length") будет указана его длина, которая может понадобиться для анимации атрибута "length" 
	paper.customAttributes.length = function (value) {
		if (!this.data("full-path")) { this.data("full-path", this.attrs.path) }; 		
		if (!this.data("total-length")) { this.data("total-length", Raphael.getTotalLength(this.data("full-path"))) };
    	return {
    		path: Raphael.getSubpath(this.data("full-path"), 0, value)   
    	}
    };	
	
	// при загрузке страницы задаем нулевую длину для обеих линий
	line1 = paper.path(p1).attr({"length": 0});
	line2 = paper.path(p2).attr({"length": 0});

	document.getElementById("draw").onclick = function(){		
		line1.animate({ 
			"length": line1.data("total-length"), 
			"stroke": "red",
			"stroke-width": 10 
		}, 1000);
					
		line2.animate({ 
			"length": line2.data("total-length"),
			"stroke": "green",
			"stroke-width": 5  
		}, 2000);   
	};
};

архив прикрепляю, посмотреть в работе можно тут:
http://jsfiddle.net/yncwpry1/1/
Вложения:
Тип файла: zip animate_path_length.zip (32.5 Кб, 11 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация Raphael SeqviriouM Библиотеки/Тулкиты/Фреймворки 3 08.11.2012 18:14
Не работает анимация при загрузки ajax ArtOs Общие вопросы Javascript 0 24.05.2012 17:52
Вертикальные линии грида в Google Area Chart fog Элементы интерфейса 2 14.06.2011 15:48
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20