第04節：Fabric.js用路徑畫不規則圖形

標籤：複雜   logs   圖形   使用   透明   工作   style   log   字元   

在Canvas上畫方形、圓形、三角形都是很容易的，只要調用fabric對應的方法就可以了，但這些都是規則的圖形，如果你想畫一個不規則的圖形,這時候你可以用fabric.js提供的路徑繪圖方法。所謂路徑繪圖就是用點和線的移動的方式進行繪圖。通過對 線、曲線、弧的應用你可以非常複雜的圖形。

我們先來看一段的代碼：

var canvas = new fabric.Canvas(‘canvas‘);var path = new fabric.Path(‘M 0 0 L 200 100 L 170 200 z‘);path.set({ left: 120, top: 120,fill:‘red‘ });canvas.add(path);

上邊的代碼需要注意的是第二行， fabric.Path( )方法裡邊跟了一串字串參數，看著有點複雜，其實這並不難理解。“M”代表“移動”命令，這個“M 00” 代表把畫筆移動到（0,0）點座標。“L”代表“線”，“L 200 100 ”的意思是使用鋼筆畫一條線，從（0,0）座標畫到（200,100）座標。 “z” 代表讓圖形閉合路徑。就這樣我們輕鬆的畫出了一個三角形。畫好三角形後，我們可以用set( )方法對三角形的位置、顏色、角度、透明度等屬性進行設定。

雖然用路徑畫圖形很簡單，但圖形比較複雜時，你會發現這很難控制，代碼會變的臃腫而不可閱讀，在實際工作中沒有這樣使用的。我們可以用svg來代替這種路徑的形式。

（轉）第04節：Fabric.js用路徑畫不規則圖形