कैनवास: एनिमेट बेजियर वक्र ड्राइंग

Question

मैं कैनवास को बाएं से दाएं पार करने वाली रेखा बनाने की कोशिश कर रहा हूं। अभी भी प्रारंभिक चरण में im कि प्राप्त करने के लिए, कदम एनीमेशन द्वारा कदम करने के लिए निम्नलिखित का उपयोग करके कि im करने के लिए

timer = window.setInterval(draw_line, 30); 

मेरी ड्राइंग समारोह इस

function draw_line() 
    { 
     context.fillStyle = "#000"; 
     context.fillRect(0, 0, canv.width, canv.height); 

      context.beginPath(); 
     context.lineWidth = 2; 
     context.strokeStyle = '#fff'; 

      //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined  
     context.moveTo(p1.x, p1.y); 
     context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y); 
     context.stroke(); 
     context.closePath(); 

      // now i have to move p1, p2 ,cp1,cp2 
      // now here is my problem 
    } 

मैं समझता हूँ कि मैं करने की जरूरत है की तरह है p1.x+= a random number; और सीपी 1 और सीपी 2 के लिए भी वही स्थानांतरित करें, लेकिन पी 2 के बारे में क्या अंत बिंदु यह लाइन को उसी ट्रैक का पालन करना चाहिए! मैं उसे कैसे प्राप्त कर सकता हूं ?

आप

Answer 1

संपादित जवाब

अपने स्पष्टीकरण के साथ

, मुझे लगता है कि मैं उचित रूप से अब इस जवाब कर सकते हैं धन्यवाद।

अंत बिंदु को कैनवास के माध्यम से शुरू किए गए प्रारंभ बिंदु का पालन करने के लिए, आपको ऐतिहासिक मूल्यों को संग्रहीत करना होगा। इस उदाहरण में, http://jsfiddle.net/mobidevelop/bGgHQ/, मैं पिछले 16 पदों के बफर को भरने के लिए माउस आंदोलनों का उपयोग करता हूं, फिर रिंगबफर पर पुनरावृत्त करके बिंदुओं के माध्यम से एक बेजियर वक्र बनाने के लिए इसका उपयोग करें।

function RingBuffer(length) { 
    this.length = length; 
    this.pointer = 0; 
    this.buffer = []; 
} 
RingBuffer.prototype.get = function(index) { 
    if (index < 0) { 
     index += this.length;   
    } 
    return this.buffer[index]; 
} 
RingBuffer.prototype.push = function(value) { 
    this.buffer[this.pointer] = value; 
    this.pointer = (this.length + this.pointer +1) % this.length;  
} 

var c = document.getElementById("myCanvas"); 
var context =c.getContext("2d"); 

timer = window.setInterval(draw_line, 30); 
function Point(x,y) { 
    this.x = x; 
    this.y = y; 
} 
Point.prototype.translateX = function(x) { 
    return this.x += x; 
}; 
Point.prototype.translateY = function(y) { 
    return this.y += y; 
}; 

function draw_line() 
{ 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, c.width, c.height); 

    var pointer = history.pointer; 
    context.beginPath(); 
    context.lineWidth = 2; 
    context.strokeStyle = '#F00';  
    for (iteration = 0, count = 15; iteration < count; iteration += 3) { 
     var p1 = history.get(--pointer); 
     var p2 = history.get(--pointer); 
     var p3 = history.get(--pointer); 
     var p4 = history.get(--pointer);   

     if (p1 && p2 && p3 && p4) { 

      context.moveTo(p1.x, p1.y); 
      context.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y); 

     } 
     pointer++; 
    } 
    context.stroke(); 
    context.closePath();  

} 

var history = new RingBuffer(16); 
var lastGrab = new Date(); 
c.addEventListener('mousemove', function() { 
    now = new Date(); 
    if (now - lastGrab > 15) { 
     history.push(new Point(event.clientX - c.offsetLeft, event.clientY - c.offsetTop)); 
     lastGrab = now; 
    }  
});​ 

---

पिछला जवाब नीचे छोड़ दिया, ऐतिहासिक प्रयोजनों के लिए।

मुझे यकीन नहीं है कि मैं पूरी तरह से समझने की कोशिश कर रहा हूं कि आप क्या हासिल करने की कोशिश कर रहे हैं, लेकिन मुझे लगता है कि आपको बस इतना करना है कि आप अपने सभी बिंदुओं को उसी मूल्य से अनुवाद करें। इसके परिणामस्वरूप कैनवास एक ही आकार को बनाए रखने वाली रेखा को पार कर जाएगा। कुछ इस तरह:

JSFiddle

var c = document.getElementById("myCanvas"); 
var context =c.getContext("2d"); 

timer = window.setInterval(draw_line, 30); 
function Point(x,y) { 
    this.x = x; 
    this.y = y; 
} 
Point.prototype.translateX = function(x) { 
    return this.x += x; 
}; 
Point.prototype.translateY = function(y) { 
    return this.y += y; 
}; 

var p1 = new Point(0,0); 
var p2 = new Point(100,100); 
var cp1 = new Point(15,45); 
var cp2 = new Point(85,45); 

function draw_line() 
{ 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, c.width, c.height); 

    context.beginPath(); 
    context.lineWidth = 2; 
    context.strokeStyle = '#fff'; 

     //Where p1, p2, cp1, cp2 are point objects that has x & y values already defined  
    context.moveTo(p1.x, p1.y); 
    context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y); 
    context.stroke(); 
    context.closePath(); 

    p1.translateX(1); 
    p2.translateX(1); 
    cp1.translateX(1); 
    cp2.translateX(1); 

    if (p1.x > 300) { 
     p1.translateX(-400); 
     p2.translateX(-400); 
     cp1.translateX(-400); 
     cp2.translateX(-400);   
    } 
} 

जब तक मैं लक्ष्य गलत समझ रहा हूँ ...