Fabricjs 可以將圖片設定為其他物件的填充色，今天就來介紹一些幫物件填入圖片的方法。

Object.setPatternFill

透過使用物件的 setPatternFill 方法來操作填充背景。
ex:

fabric.util.loadImage('https://www.pakutaso.com/shared/img/thumb/KAZTDSCF2521_TP_V4.jpg', function (img) {
  text.setPatternFill({
      source: img,
      repeat: 'repeat'
  })
  canvas.renderAll()
})

fabric.Pattern

透過使用 fabric.Pattern 類別來創造 pattern 物件，
並且將物件的 fill 屬性設定為 pattern。

來個範例:

// 載入圖片取得 HTMLelement
fabric.util.loadImage('https://www.pakutaso.com/shared/img/thumb/KAZTDSCF2521_TP_V4.jpg', function (img) {
  // 新增一個 pattern 物件
  const pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  })
  // 將圖片的 fill 屬性設定成某個 pattern
  const text = new fabric.Text('鐵人賽\n倒數兩天', {
    fontSize: 100,
    fontWeight: 800,
    fill: pattern // 設為 pattern
  })
  canvas.add(text)
})

其中 source 必須為 HTMLImageElement 也就是 html 的 img，repeat 模式分幾種:

• repeat 重複模式，若圖片小於物件則會重複自動填滿整個物件。
• repeat-y 只有上下重複
• repeat-x 只有水平重複
• no-repeat 不重複

不過目前我們的圖片都比我們的填滿目標物件還要大，要怎麼去縮小原始的背景圖片以便當成重複的背景呢。

動態改變圖片

要做到這樣的需求，必須要先建立一個 StaticCanvas 來做為一個要當成重複背景的原圖，並動態的改變他的大小，最後再輸出成 HTMLElement 來做 source 使用。

fabric.util.loadImage('https://www.pakutaso.com/shared/img/thumb/PPH_seiarupusukiku_TP_V4.jpg', function (img) {
  const oImg = new fabric.Image(img)
  // 新增一個新的靜態畫布
  oImg.scaleToHeight(50) // 縮小成 height = 50
  const patternSourceCanvas = new fabric.StaticCanvas()
  patternSourceCanvas.add(oImg)
  patternSourceCanvas.renderAll()
  const pattern = new fabric.Pattern({
    source: function() {
      // 設定靜態畫布的大小同等圖片大小
      patternSourceCanvas.setDimensions({
        width: oImg.getScaledWidth(),
        height: oImg.getScaledHeight()
      })
      patternSourceCanvas.renderAll()
      // 回傳 htmlElement
      return patternSourceCanvas.getElement()
    },
    repeat: 'repeat'
  })
  const text = new fabric.Text('鐵人賽\n倒數兩天', {
    fontSize: 100,
    fontWeight: 800,
    fill: pattern
  })
  canvas.add(text)
  const rect = new fabric.Rect({
    width: 300,
    height: 200,
    top: 250,
    fill: pattern
  })
  canvas.add(rect)
})

結果

這樣一來也可以看到其他 repeat 效果的結果囉。

repeat-x

repeat-y

no-repeat

今日小結

介紹了 Fabricjs pattern 的使用。
可以透過使用 object.setPatternFill() 或是物件屬性 fill: pattern 來為物件加入填充背景。

相關連結

• fabricjs-doc
• 本日 codepen - 靜態 pattern
• 本日 codepen - 動態改變來源材質