用Fabric.js繪製貝塞爾曲線

Question

我想繪製Bezier，使用Fabric.js路徑方法，問題是Path將連接開始到結束，但我不想這樣做。

Answer 1

對於你的問題這條道路將開始連接到結束。

是的，它會連接。

但我不想這樣做。

儘管現在沒有什麼可以用來避免這種行爲。但是，是的，有一種解決方法，您的路徑不會看起來像開始和結束連接。看下面的演示。有兩條路徑顯示加入的開始和結束（三角形）。第二，結尾和開始部分看起來並不相連（箭頭）。這兩者之間的差異僅僅是填充屬性在第二個路徑中設置爲false即箭頭。但是，如果您省略了填充屬性或將其設置爲某種顏色，它將看起來與具有聯合結束和開始的第一個路徑（三角形）類似。因此，您可以按照您的要求創建貝塞爾曲線。

// initialize fabric canvas and assign to global windows object for debug 
 
var canvas = window._canvas = new fabric.Canvas('c'); 
 
//var canvas = new fabric.StaticCanvas('c'); 
 
var path = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100', { 
 
left: 100, 
 
top: 50, 
 
stroke: 'red', 
 
strokeWidth: 1, 
 
fill: false, 
 
scaleY:3 
 
}); 
 
canvas.add(path); 
 

 

 
var p = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100',{ 
 
    left: 200, 
 
    top: 60, 
 
    strokeWidth:2, 
 
    scaleY:3 
 
}); 
 

 
canvas.add(p);

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

希望它能幫助:)

UPDATE

Fiddle

以上是在這個撥弄鏈接，你會看到兩個路徑正在創建，並且第三個不會創建，因爲傳遞的路徑字符串無效。

你也可以創建一個演示小提琴與你面臨的實際問題。對我來說，幫助和理解這個問題很容易。