Raphael.js: more paths, clean() & glow()

Question

У меня так много проблем с raphael.js, и я надеюсь, что кто-нибудь может мне помочь.

Первая проблема: Почему они не рисуют мне два разных пути? Это потому, что он находится в том же холсте/div?! SOLVED!

function animateLine(canvas, divName, time, durzeit, colorNumber, pathString) { 
    $('#' + divName).ready(

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

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

      }, 
     }); 
    }, function() { 
     $('path[fill*="none"]').glow(); 
    }); 
}; 

var canvas = Raphael('canvas', 400, 400); 

animateLine(canvas, "canvas", "1000", "2000", "#03ae8c", "m87.118,11.764c2.236,7.58,7.497,14.165,9.474,22.045c2.957,11.786,3.704,24.38,2.293,36.434c-1.808,15.449-6.275,29.477-10.602,44.306c-5.588,19.152-6.986,38.342-2.33,57.733c2.296,9.562,7.805,20.21,15.25,26.768c7.399,6.517,16.052,11.587,23.489,18.181c7.456,6.61,9.146,21.192,8.788,30.781c-0.196,5.247-2.378,8.792-4.234,13.449c-1.405,3.526-3.309,6.689-4.824,10.113c-0.353,0.797-0.681,1.17-0.725,2.137"); 

animateLine(canvas, "canvas", "1000", "4000", "#ff0072", 
      "m214.552,10.879c1.197,1.98-7.28,12.149-8.41,14.51c-5.543,11.586-6.496,22.61-5.73,35.377c1.028,17.148,12.397,31.641,21.652,45.415c13.984,20.811,26.343,43.782,27.046,69.358c0.339,12.338,0.575,25.059-0.037,37.387c-0.522,10.504-4.778,17.693-8.019,27.26c-1.225,3.618-1.75,7.167-4.138,9.959c-3.883,4.54-9.488,9.212-15.544,10.005c-3.437,0.45-9.848,1.725-13.016-0.599"); 

я не буду чистить холст, все пути показано на рисунке. Я попытался удалить функцию canvas.clean(). Но он показывает, что пути пикселированы. это еще не самое лучшее решение ...

Вторая проблема: Я просто хочу, чтобы эффект свечения, но не работают.

}, function() { 
     $('path[fill*="none"]').glow(); 
    }); 

Я «рисовать»/анимировать 10 или более различных путей, они должны начать разное время и эффект свечения имеет важное значение. но ничего не работает, я работаю над этим кодом с 2 дней. должен ли я подходить к этому коду по-другому?

Редактировать: другая проблема .... почему они рисуют мой первый путь один раз, второй дважды, ...? T_T

HERE THE JSFIDDLE

Answer 1

У меня есть другое решение этого. Посмотрите на DEMO Я создал.

Также код:

var paper = Raphael("notepad", 500, 500); 

var path = paper.path("M 50 200 L 120 100 200 190 80 250z"); 
var shadow = path.clone().scale(0.95).hide(); 


shadow.glow({width: 8,color: 'orange'}); 
path.attr({stroke: "black", "stroke-width": 2}); 

Очевидно, что вы можете изменить цвет свечения, scale() и модифицировать glow() для offsetx и offsety. Вероятно, вам не нужно использовать scale() в вашем случае, но это полезно, если вы хотите создать эффект тени.

Надеюсь, это полезно.