मैं राफेल जेएस के साथ खींचे जाने वाले वेक्टर पथ को कैसे एनिमेट कर सकता हूं?

Question

राफेल जेएस के साथ खींचे जाने वाले वेक्टर पथ को मैं कैसे एनिमेट कर सकता हूं?

मेरे पास निर्देशांक का एक सेट है जिसे मैं राफेल जेएस का उपयोग करके कनेक्ट करना चाहता हूं।

एक ग्रिड पर, निर्देशांक (x, y सेट) हैं। मैं एक छोर से शुरू करना चाहता हूं और उपयोगकर्ता को देखता हूं जैसे "डॉट्स कनेक्ट करें"। अंत उत्पाद कुछ इस तरह दिखेगा:

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

आदर्श रूप में, मैं पथ घुमावदार ताकि वे अधिक इस प्रकार दिखाई देगा करने में सक्षम होना चाहते हैं (निर्देशांक संदर्भ के लिए जोड़ा):

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

निर्देशांक हैं:

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

मैं गूगल खोज किया गया है और मैं thr पढ़ लिया है यह प्रश्न How to draw a vector path progressively? (Raphael.js) है लेकिन मैं विशेष रूप से Raphael.js का उपयोग करने की कोशिश कर रहा हूं और Raphael.js के लिए उस पृष्ठ पर उदाहरण काम नहीं कर रहा है और न ही यह इनपुट के लिए एकाधिक समन्वय बिंदुओं का उपयोग करने के बारे में बात करता है।

Answer 1

प्रगतिशील पथ

उत्तरोत्तर पथ बना करने के लिए आसान है। मैं this question पर दूसरे सबसे स्वीकार्य उत्तर को नापसंद करता हूं क्योंकि यह प्रत्येक चरण में पथ को दोबारा शुरू करता है, जिसमें पेपर को बीच में साफ़ किया जाता है। यहाँ उपयोगिता समारोह मैं फिर से समय और समय का उपयोग किया है है:

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

आप कार्रवाई on my site में देख सकते हैं।

यह अकेले एक रैखिक फैशन में अपने अंक के प्रगतिशील पथ निर्माण को सरल बना देगा। आप बस अपने पथ को संकलित करेंगे ...

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

और फिर इसे सेट किए गए किसी भी पथ एनीमेशन फ़ंक्शन पर पास करें। मेरे मामले में,

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

वक्र अंतर्वेशन

राफेल 2.0 के Catmull रोम सुविधा शान से अपने अंक के बीच अत्यंत सरल (इरिक डहलस्टरोम करने के लिए धन्यवाद इस ओर इशारा करते हुए के लिए) curving बनाता है। आपको बस इतना करना है कि अंक के बीच स्थानांतरित करने के लिए 'आर' कमांड का उपयोग करके पथ बनाएं, और राफेल बाकी करेगी।

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

आप एक साथ काम कर रहे here सभी टुकड़ों को देख सकते हैं।

Answer 2

आप दिए गए बिंदुओं के माध्यम से चिकनी वक्र प्राप्त करने के लिए कैटमुल रोम (http://raphaeljs.com/reference.html#Paper.path देखें) का भी उपयोग कर सकते हैं।

लाइव डेमो here (अंक असाइन करने के लिए क्लिक करें, फिर कैटमुल रोम वक्र में संक्रमण के लिए शिफ्ट-क्लिक करें)।