Day 3 - 畫布設置

Fabric 畫布設置

我們必須透過 new fabric.Canvas 來抓取 <canvas> 標籤，並且管理所有 Fabricjs 相關的物件，我們必須提供 canvas 這個元件的 id 值來取得 fabric.Canvas 的實例。

物件管理

有了 fabric.Canvas 實例之後，我們就可以將我們所建立的物件利用 add() 方法加入 canvas 中，利用 item() 或 getObjects() 方法取的畫布中的物件，最後利用 remove() 方法將物件從 canvas 中移除。

請看以下範例

const canvas = new fabric.Canvas('canvas') //提供 canvas 的 id

canvas.add(rect) // 新增物件

// 如果之前暫存的 rect 不見了，就得用這兩個方法找到他
// 可以個別 console 印出來看看長怎樣
// 結果為 true
canvas.getObjects()[0] === canvas.item(0)

// 這邊過一秒後刪掉先前增加的 rect
setTimeout(() => canvas.remove(rect), 1000)
// 這個也行
// setTimeout(() => canvas.remove(canvas.getObjects()[0]), 1000)
// 這個也行
// setTimeout(() => canvas.remove(canvas.item(0)), 1000)

畫布設置

這個 fabric.Canvas 的實例當然沒有那麼簡單，他能讓我們提供一些設定值，來設置一些如 畫布大小、背景色 backgroundColor、背景圖片 backgroundImage、覆蓋圖片 overlayImage...，以及一些物件在 canvas 中被選取的樣式和數標滑過的樣式...等等一大堆的設定值，這邊就只舉幾個常用的來記錄。

一些常用的設定

fabric.Canvas('canvas', {
  height: window.innerHeight, // 讓畫布同視窗大小
  width: window.innerWidth, // 讓畫布同視窗大小
  isDrawingMode: false, // 設置成 true 一秒變身小畫家
  hoverCursor: 'progress', // 移動時鼠標顯示
  freeDrawingCursor: 'all-scroll', // 畫畫模式時鼠標模式
  backgroundColor: 'rgb(255,255,255)', // 背景色,
  backgroundImage: 'https://www.pakutaso.com/shared/img/thumb/neko1869IMG_9074_TP_V.jpg' // 背景圖片
})

圖片來源 - pakutaso

當然少不了靈活的動態修改

canvas.setHeight(300) // 將畫布大小修改為 300px

// 一次更改好幾個
canvas.set({
  backgroundColor: '#333',
  isDrawingMode: true
})

背景圖

這邊特別把背景圖拿出來紀錄，因為呢如果我們直接透過

fabric.Canvas('canvas', {
  backgroundImage: 'https://www.pakutaso.com/shared/img/thumb/neko1869IMG_9074_TP_V.jpg' // 背景圖片
})

開啟 console 會出現下面錯誤

這邊建議改使用 setBackgroundImage(url, callback)
後面的 callback 為圖片載入 (onload) 後執行

canvas.setBackgroundImage('https://www.pakutaso.com/shared/img/thumb/AMEMAN17826009_TP_V.jpg', () => canvas.renderAll())

或是直接建立一個 fabric 的 Image 實例，來當背景圖。
用這種方式能夠更靈活的設置位置以及大小。

fabric.Image.fromURL('https://www.pakutaso.com/shared/img/thumb/AMEMAN17826009_TP_V.jpg', (img) => {
  const oImg = img.set({
      left: 100,
      top: 100,
      angle: 15,
      width: 500,
      height: 500
  })
  canvas.setBackgroundImage(oImg).renderAll()
})

StaticCanvas & Canvas

Fabricjs 很貼心的提供了一種是靜態不需操控的類別 StaticCanvas。
另一種是一般的 Canvas 類別。
兩者最大的差異就是:

• StaticCanvas 主要就是拿來做靜態顯示 (不須被使用者操控)
• Canvas 新增出來的物件都能被使用者自由的操控
• StaticCanvas 繪圖效能更好
• Canvas 互動性較佳

以下是兩種 Canvas new 的方式

const staticCanvas = new fabric.StaticCanvas('static')
const dynamicCanvas = new fabric.Canvas('dynamic')

範例 1 - fabricjs Canvas configuration
範例 2 - fabricjs static & dynamic canvas

參考資源

Fabricjs 提供的 Canvas 能夠使用的參數以及方法其實還有超多!
這邊就不全部列舉，有興趣的可以到官方文件查詢囉!

Fabric doc - Canvas