用畫布繪製流暢的線條

對不起，剛剛注意到你今天的評論。碰巧正在測試相關的東西並記住你的問題。它發生在過去我寫了一些代碼來插入一些行。它被稱爲Catmull-Rom（我只是一個參考，我googleed）它通過中間控制點。我確實已將代碼更改爲我的測試，並認爲您可能有一些用處。請參閱http://jsfiddle.net/FHKuf/6/。

來源

2011-10-25 16:31:53 Prusse

這是非常接近。但是這些點上的曲線在這條線的對面彎曲。所以它現在是一條波浪線。生病看看是否可以操縱這是正確的，除非你知道爲什麼這樣做。謝謝！ –

這是因爲Catmull-Rom樣條曲線不插入段中的第一個和最後一個點，並且我在控制點列表的開始和結束處添加了點，以便繪製它們。嘗試玩像http://jsfiddle.net/FHKuf/54/ – Prusse

這是一個古老的問題。我偶然發現一個名爲[Smooth的圖書館。JS]（https://github.com/osuushi/Smooth.js）。我沒有測試它，但有一個[示例]（http://osuushi.github.io/plotdemo016.html），它可能值得使用。 – Prusse

我正在探索所有的技術，但沒有得到任何適當的解決方案，以平滑畫布上的自由繪畫。然後，我簡單地使用quadraticCurveTo以不同的邏輯，而不使用原始的鼠標點。

我首先計算了控制點（中點），並用控制點替換了舊的鼠標移動點。我做了2次，最後將quadraticCurveTo應用到最終數組，並且我得到了超級平滑的繪圖。

這太棒了。我沒有使用這個沉重的paper.js和其他平滑庫。

這裏是我的代碼：

currentCanvas.beginPath(); 
     currentCanvas.lineCap = 'round'; 
     currentCanvas.strokeStyle = "black"; 
     currentCanvas.lineWidth = "2"; 
     currentCanvas.moveTo(queue[0].x, queue[0].y); 

     //queue is an array of original points which were stored while onmousemove event callback 

     var tempQueue1 = [queue[0]]; 
     for (var i = 1; i < queue.length - 1; i = i+1) { 
      //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) && (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){ 
       var c = (queue[i].x + queue[i + 1].x)/2; 
       var d = (queue[i].y + queue[i + 1].y)/2; 
       //tempQueue.push(queue[i]); 
       tempQueue1.push({x:c, y:d}); 
       //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d); 
      //} 
     } 

     var tempQueue2 = [tempQueue1[0]]; 
     for (var i = 1; i < tempQueue1.length - 1; i = i+1) { 
      //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) && (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){ 
       var c = (tempQueue1[i].x + tempQueue1[i + 1].x)/2; 
       var d = (tempQueue1[i].y + tempQueue1[i + 1].y)/2; 
       //tempQueue.push(queue[i]); 
       tempQueue2.push({x:c, y:d}); 
       //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d); 
      //} 
     } 

     var tempQueue = [tempQueue2[0]]; 
     for (var i = 1; i < tempQueue2.length - 1; i = i+1) { 
      //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) && (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){ 
       var c = (tempQueue2[i].x + tempQueue2[i + 1].x)/2; 
       var d = (tempQueue2[i].y + tempQueue2[i + 1].y)/2; 
       //tempQueue.push(queue[i]); 
       tempQueue.push({x:c, y:d}); 
       //currentCanvas.quadraticCurveTo(queue[i].x, queue[i].y, c, d); 
      //} 
     } 

     for (var i = 1; i < tempQueue.length - 2; i = i+1) { 
      //if((Math.abs(queue[i].x - queue[i-1].x) >3 || Math.abs(queue[i].x - queue[i-1].x)<1) && (Math.abs(queue[i].y - queue[i-1].y) >3 || Math.abs(queue[i].y - queue[i-1].y)<1)){ 
       var c = (tempQueue[i].x + tempQueue[i + 1].x)/2; 
       var d = (tempQueue[i].y + tempQueue[i + 1].y)/2; 
       currentCanvas.quadraticCurveTo(tempQueue[i].x, tempQueue[i].y, c, d); 
      //} 
     } 

     // For the last 2 points 
     currentCanvas.quadraticCurveTo(
     tempQueue[i].x, 
     tempQueue[i].y, 
     tempQueue[i+1].x, 
     tempQueue[i+1].y 
     ); 
     currentCanvas.stroke(); 
     queue = [];

來源

2017-06-28 18:55:29

用畫布繪製流暢的線條

回答

相關問題