1

I have so much problems with the raphael.js and i hope anyone can help me.

First Problem: Why they don't draw me two different paths? Is it because it is in the same canvas/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");

I wont clean the canvas, all paths will shown. i tried to delete the function canvas.clean(). But than it shows the paths pixelated. thats not the best solution...

Second Problem: I just want the glow effect, but it dont work.

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

I will 'draw'/animate 10 or more different paths, they should start to different times and the glow effect is important. but nothing works, i work on this code since 2 days. should i approach this code in a different way?

edit: other problem.... why they draw my first path once, the second twice, ....? T_T

HERE THE JSFIDDLE

sammy
  • 15
  • 7

1 Answers1

0

I have a different solution to that. Look at the DEMO i have created.

Also the code:

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});

Obviously, you can change the color of glow, scale(), and modify the glow() for offsetx and offsety. Probably you do not need to use scale() in your case, but it is useful if you want to create shadow effect.

Hope this is useful.

Community
  • 1
  • 1
Brian
  • 4,958
  • 8
  • 40
  • 56
  • thank you. could it work to both sides? if i clone the path twice? – sammy Jun 20 '13 at 19:33
  • @Sam Awsm K: No problem. If you make the width wide enough, you will get that effect. Also no need for scale() function I guess. Good luck – Brian Jun 20 '13 at 19:42
  • The whole idea of cloning is to give your glow a free positioning possibility. You can move it around and make `shadows`, `innerglow` effect, so on... – Brian Jun 20 '13 at 19:46
  • I think my answer helped you to solve your problem. You should accept it so that the question will be closed. People will not click on your question if there is not accepted answer. – Brian Jun 21 '13 at 21:34
  • aw, sorry, im new here. i will close it. :) – sammy Jun 22 '13 at 08:27