Come posso animare un tracciato vettoriale disegnato con Raphael JS?

Question

Come è possibile animare un tracciato vettoriale disegnato con Raphael JS?

Ho un set di coordinate che vorrei collegare usando Raphael JS.

Su una griglia, le coordinate sono (x, y set). Vorrei iniziare da un capo e "collegare i punti" mentre l'utente guarda. Il prodotto finale sarebbe simile a questa:

Picture 9.png http://img213.imageshack.us/img213/8013/picture9my.png

Idealmente, vorrei essere in grado di rendere i percorsi curvi così come sarebbero più simile a questo (coordinate aggiunti per riferimento):

Picture 10.png http://img534.imageshack.us/img534/1789/picture10fc.png

Le coordinate sono:

26,-6 
14,-12 
5,-20 
11,-28 
14,-37 
5,-40 

ho cercato di Google e ho letto thr a questa domanda How to draw a vector path progressively? (Raphael.js) ma sto provando a usare Raphael.js in modo specifico e l'esempio su quella pagina per Raphael.js non sembra funzionare e non parla dell'utilizzo di più punti di coordinate per gli input.

Answer 1

progresso Paths

disegno di un percorso progressivamente è facile da fare. Non mi piace la seconda risposta più accettata su this question perché ricrea un percorso ad ogni passaggio, cancellando il foglio in mezzo. Ecco la funzione di utilità che ho usato più e più volte:

function drawpath(canvas, pathstr, duration, attr, callback) 
{ 
    var guide_path = canvas.path(pathstr).attr({ stroke: "none", fill: "none" }); 
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr); 
    var total_length = guide_path.getTotalLength(guide_path); 
    var last_point = guide_path.getPointAtLength(0); 
    var start_time = new Date().getTime(); 
    var interval_length = 50; 
    var result = path;   

    var interval_id = setInterval(function() 
    { 
     var elapsed_time = new Date().getTime() - start_time; 
     var this_length = elapsed_time/duration * total_length; 
     var subpathstr = guide_path.getSubpath(0, this_length);    
     attr.path = subpathstr; 

     path.animate(attr, interval_length); 
     if (elapsed_time >= duration) 
     { 
      clearInterval(interval_id); 
      if (callback != undefined) callback(); 
       guide_path.remove(); 
     }          
    }, interval_length); 
    return result; 
} 

Potete vederlo in azione on my site.

Questo da solo renderebbe assolutamente semplice l'animazione del percorso progressivo della costruzione dei punti in modo lineare. Dovresti semplicemente compilare il tuo percorso ...

var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"]; 

E quindi passarlo a qualsiasi funzione di animazione del percorso che hai impostato. Nel mio caso,

drawpath(paper, 
      sequence_path, 
      3500, 
      { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, 
      function() 
      { 
       alert("All done"); // trigger whatever you want here 
      }); 

curva di interpolazione

funzione Catmull Rom Raphael 2.0 lo rende curve con grazia tra i punti estremamente semplici (grazie a Erik Dahlström per la precisazione). Tutto quello che devi fare è costruire un percorso usando il comando 'R' per spostarti tra i punti, e Raffaele farà il resto.

function generateInterpolatedPath(points) 
{ 
    var path_sequence = []; 
    path_sequence.push("M", points[0].x, points[0].y); 
    path_sequence.push("R"); 
    for (var i = 1; i < points.length; i++) 
    { 
     path_sequence.push(points[i].x, points[i].y); 
    } 
    return path_sequence; 
} 

Potete vedere tutti i pezzi a lavorare insieme here.

Answer 2

È anche possibile utilizzare Catmull Rom (vedere http://raphaeljs.com/reference.html#Paper.path) per ottenere la curva uniforme attraverso i punti specificati.

Demo live here (fare clic per assegnare i punti, quindi fare clic tenendo premuto MAIUSC per passare alla curva Catmull Rom).