今天要來介紹 Fabricjs 的繪畫功能，只要切換一個變數，就能夠輕鬆的將 Fabricjs 原本的物件移動模式，改變成繪畫模式，每一個 Fabricjs 繪畫出來的線條，都會被新增成 Fabric.Path，當我們切回去物件操作模式時，我們一樣能夠像其他物件一樣，自由的操控我們繪畫出來的線條。

並且能夠自訂自己的筆刷樣式，讓繪圖功能變得更加豐富。

繪圖模式

切換至繪圖模式

透過 canvas.isDrawingMode = true 將畫布切換到繪畫模式。
切換後做鼠標拖曳的動作會就會對畫布做出細細的鉛筆筆跡。

若將此屬性設為 false 就為預設的操作物件模式。而我們剛剛所畫出來的線條，就會變回物件的型態，物件為 fabric.Path 的型態。

切換畫筆樣式

設定 canvas.freeDrawingBrush.color 可改變筆刷的顏色。

此屬性可使用 hex rgba 顏色。
設定後顏色就會被改變

設定 canvas.freeDrawingBrush.width 改變筆刷大小

設定畫筆寬度，寬度單位為 pixel 不可為小數。

設定 canvas.freeDrawingBrush.shadow 為筆刷加入陰影樣式

可直接使用和 css 相同模式新增陰影。

canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10
canvas.freeDrawingBrush.shadow = '10px 10px rgba(0, 0, 0, 0.5)'

陰影怎麼會這樣??

透過上面的 gif 我們發現我們在畫完圖形放開滑鼠後，陰影才被加上去。
使用 Fabricjs 內建的陰影類別 new fabric.Shadow 陰影才有在繪畫時更新。

// 將陰影改成這樣
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
        blur: 10,
        offsetX: 10,
        offsetY: 10,
        affectStroke: true,
        color: 'black',
      })

或是使用 canvas.freeDrawingBrush.setShadow() 可使用 css 陰影或是傳入陰影參數。

canvas.freeDrawingBrush.setShadow('10px 10px black')

這樣就可以即時的把陰影一起畫上去囉！

改變筆刷樣式

Fabricjs 預設是使用鉛筆的筆刷樣式。
接下來要介紹更多不同 Fabricjs 內建的筆刷樣式。
Fabricjs 提供了下面幾個簡單的基礎樣式可使用。

• fabric.PencilBrush
• fabric.CircleBrush
• fabric.SprayBrush

改變 canvas.freeDrawingBrush 屬性來變更筆刷樣式。

改變筆刷後，一樣可以透過 freeDrawingBrush.color 和 freeDrawingBrush.width，來調整筆刷顏色。

須注意因為是使用 new 取得新的物件，所以原本畫筆的顏色和粗細相關設定會被重製，若有需要繼續使用須自己轉存。

圓形筆刷

繪製出大小不一的圓形

canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)
canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10

噴霧筆刷

canvas.freeDrawingBrush = new fabric.SprayBrush(canvas)

自訂筆刷

強大的自訂筆刷功能 fabric.PatternBrush 這個類別讓我們能夠自訂筆刷，概念就像蓋印章，必須建立一個 canvas 必且繪製一個圖形，PatternBrush 收到後就會重複繪製你所自訂的圖形，讓我們來看看範例。

const squareBrush = new fabric.PatternBrush(canvas)
// getPatternSrc  取得要重複繪製的圖形 Canvas
squareBrush.getPatternSrc = function() {
  const squareWidth = 30
  const squareDistance = 2
  // 創立一個暫存 canvas 來繪製要畫的圖案
  const patternCanvas = fabric.document.createElement('canvas')
  // canvas 總大小為每一格畫筆的大小
  patternCanvas.width = patternCanvas.height = squareWidth + squareDistance

  const ctx = patternCanvas.getContext('2d')

  ctx.fillStyle = this.color
  ctx.fillRect(0, 0, squareWidth, squareWidth)
  // 回傳繪製完畢的 canvas
  return patternCanvas
}

canvas.freeDrawingBrush = squareBrush

簡單來說我們新增 new fabric.PatternBrush 類別。
並且使用 getPatternSrc 方法回傳繪製完畢的 canvas。
最後在把 canvas.freeDrawingBrush = squareBrush
因為使用自製的 canvas，我們可以很方便自由的創造自己的筆刷樣式，讓筆刷變得更加多元有趣。

今日小結

• Fabricjs 模式的切換
• 筆刷樣式調整
  • 顏色、大小、陰影
• 內建筆刷樣式調整
• 自訂筆刷樣式調整
• codepen