繪製超過3個控制點的貝塞爾曲線

我知道我可以使用bezierCurveTo（）使用3個控制點繪製貝塞爾曲線。如何繪製超過3個控制點的貝塞爾曲線？我嘗試使用KineticJS中的樣條曲線（因爲我可以指定儘可能多的點），但生成的曲線看起來不像貝塞爾曲線（例如，如果我只設置3個點）。我能以某種方式將更多的二次貝塞爾曲線連接在一起以獲得具有多於3個控制點的曲線嗎？繪製超過3個控制點的貝塞爾曲線

來源

2013-01-13 Adrian

你可以用一些代碼創建一個jsfiddle（在jsfiddle.net），我會盡力幫助你嗎？ – SoluableNonagon

另外，你見過：http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/ – SoluableNonagon

比方說你有3條曲線：

curve1, curve2, and curve3

和你想要的所有的曲線連接在一起的曲線，稱之爲：

curve 4

隨着kineticJS（4.3.1在這個時候），你可以這樣做：

var points1 = curve1.getPoints(); 
var points2 = curve2.getPoints(); 
var points3 = curve2.getPoints(); 
var joined = points1.concat(points2,points3); 

curve4.setPoints(joined); 
// make sure to redraw the layer

來源

2013-01-17 16:09:08 SoluableNonagon

繪製超過3個控制點的貝塞爾曲線

回答

相關問題