SVG貝塞爾路徑，僅從一個端點到某個交點

如果我有一個SVG <path>使用bezier（比方說二次方），我已經指定了終點A，終點B和一個控制點C.SVG貝塞爾路徑，僅從一個端點到某個交點

如果我還有一些位於bezier路徑上的任意點P，如何繪製如上定義的貝塞爾曲線，但是在P處停止（而不是從A到B，從A到P）？

2017-06-10 tscizzle

如果你在寫JS的規劃，並且已經獲得你的觀點基於貝塞爾時間參數「P」，這聽起來像https://pomax.github.io/bezierinfo/#splitting的工作 –

這是一個很好的電話。我最終編寫了基於de Casteljau的自己的JS函數，但由於我沒有從bezier時間參數't'得到'P'，我必須編寫一個函數來從'P'派生't' （重新安排貝塞爾方程，並使用二次方程）。 – tscizzle

下面的示例給你一個小的方向

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG 001</title> 
 
    <style> 
 
     body{font-family:"Calibri", sans-serif;} 
 
     svg{border:1px solid #eee;width:100px;height:100px;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
     <p>Offset Dasharray</p> 
 
    <svg width="200" height="200" viewBox="0 0 500 500"> 
 
    <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none" 
 
     stroke-width="5" fill="none" /> 
 
    </svg> 
 
    <script> 
 
     var paintPathAni=function(path, duration, color, callback){ 
 
      easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t } 
 
      easeInQuad= function (t) { return t*t} 
 
      easeOutQuad= function (t) { return t*(2-t) } 
 
      /* 
 
      for (var i=0; i<=1; i+=0.1) 
 
      { 
 
      console.log(easeInOutQuad(i)); 
 
      } 
 
      */ 
 
      var len=path.getTotalLength(); 
 
      var aktLen; 
 
      var sumSteps = duration/(1000/60) // 60 pics per second 
 
      var step=1; 
 
      var pathAnim; 
 
      var anim=function(){ 
 
      //aktLen = len/sumSteps*step; 
 
      aktLen = easeInOutQuad(step/sumSteps)*len; 
 
      //aktLen = easeInQuad(step/sumSteps)*len; 
 
      //aktLen = easeOutQuad(step/sumSteps)*len; 
 
      
 
      path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen)); 
 
      path.setAttribute('stroke',color); 
 
      if (step < sumSteps){ 
 
       step++; 
 
       pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second 
 
       } else { 
 
       clearTimeout(pathAnim); 
 
       path.setAttribute('stroke',"red"); 
 
       path.setAttribute('stroke-dasharray','none'); 
 
       if (callback) return callback(); 
 
       } 
 
      } 
 
      anim(); 
 
     } 
 
     paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')}); 
 
    </script> 
 
    </body> 
 
    </html>

來源

2017-06-11 17:39:41

SVG貝塞爾路徑，僅從一個端點到某個交點

回答

相關問題