Анимация прорисовки линии на Raphael

[kumar6346]

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

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. Все жутко тормозит во всех браузерах

Подскажите как мне быть с моими проблемами что сделать может кто то сможет подсказать другой вариант рисований линии?? Помогите пожалуйста!

[vadim5june]

а просто в канвасе без рафаеля не пробовали нарисовать?

[kumar6346]

vadim5june,
а можете подсказать как на канвасе такое сделать? Привести примеры

[vadim5june]

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

[kumar6346]

Так написал кое что другое стало работать намного лучше и быстрее но в ие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);

			});

[vadim5june]

в ie8 канвас не поддерживается возможно рафаедь должен иммитировать или заменять на SVG
есть гугловская библиотека excanvas.js. для ie =правда я с ней не работал

[kumar6346]

ексканвас подключал ничего не изменилось(

[smat]

Если еще актуально - попробуйте вот так.
Работает в том числе и в 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/