今天分別介紹兩部分

• 線性漸層
• 圓形漸層

線性漸層 linear Gradients

Fabricjs 可以為物件加上漸層的效果，可選擇多種顏色的漸層，讓物件填上更炫的色彩。
透過使用 setGradient 這個在 fabric.Object 上的 method，能夠為所有我們建立的 2D 物件加上漸層，只要簡單的呼叫 setGragient('fill', { ... }) 就可以直覺且輕鬆的將物件填入漸層色。

上下漸層

// 漸層色
rect.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 100,
  colorStops: {
    0: '#000',
    1: '#fff'
  }
})

這樣可直覺的畫出線性的漸層，也就是從起始點 (x1, y1) 畫到 (x2, y2)，再來填寫 colorStops 漸層中每一個色階都填上，就能輕鬆做出漸層效果啦！
如圖

左右漸層

不難想像如果要從左到右的漸層就是

// 左右
rect.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: 100,
  y2: 0,
  colorStops: {
    0: 'yellow',
    1: 'red'
  }
})

)

斜漸層

照我們剛才上面的使用，我們就能很簡單地做出斜角間層

小技巧 x y 的值不只能使用正數呦！
我們可以透過使用負值讓我們的漸層範圍拉大，把漸層渲染開，看起來才不會那麼集中

// 斜角
rect3.setGradient('fill', {
  x1: -50,
  y1: -50,
  x2: 100,
  y2: 100,
  colorStops: {
    0: '#a18cd1',
    1: '#fbc2eb'
  }
})

多種顏色漸層

我們可以透過在 colorStops 中設定小數來訂出我們每個色階的顏色，這邊用了紅、橙、黃、綠、藍、紫 六種顏色分別間隔 0.2。

rect.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: 100,
  y2: 0,
  colorStops: {
    0: 'red',
    0.2: 'orange',
    0.4: 'yellow',
    0.6: 'green',
    0.8: 'blue',
    1: 'purple'
  }
})

圓形漸層 Rudial Gradients

剛剛看了那麼多線性的漸層，接下來我們就來看看圓形漸層。

圓形的漸層只需要把 setGradient 中第二個 options 參數中的 type 設為 radial 就能開始畫圓形漸層啦！

Fabricjs 的圓形漸層的概念，就是先建立兩個圓型後，由第一個圓形漸層到第二個圓型。

接下來我們馬上來實做看看。

type 屬性若沒有設定就會使用預設值 linear 也就是我們上面所用的線性漸層。

由中心往外散開

首先，我們必須先把兩個圓形弄出來，首先建立第一個圓

r1: 60, // 第一個圓半徑
x1: 50, // 第一個圓心座標
y1: 50, // 第一個圓心座標

和第二個圓形

r2: 10, // 第二個圓半徑
x2: 50, // 第一個圓心座標
y2: 50, // 第二個圓心座標

再來我們一樣要建立 colorStops 來做每個階段的顏色的區別。

colorStops: {
    0: 'green',
    1: 'red'
}

以下是圖解

可以看到我們的漸層就從第一個圓畫到第二個圓囉！

完整程式

// 中心圓散開
rect4.setGradient('fill', {
    type: 'radial',
    r1: 60, // 第一個圓半徑
    x1: 50, // 第一個圓心座標
    y1: 50, // 第一個圓心座標
    r2: 10, // 第二個圓半徑
    x2: 50, // 第一個圓心座標
    y2: 50, // 第二個圓心座標
    colorStops: {
        0: 'green',
        1: 'red'
    }
})

圓角範例

讓我們再來看看另外一個範例，讓我們更好理解圓形漸層。

1. 建立的一個從兩個圓心都在 (0,0)
2. 第一個圓較大，設為半徑 60
3. 第二個圓設成非常小，這邊直接設成 0
4. 設定漸層的顏色由黃色到紅色

如上圖，我們看到一個圓角的漸層，而在超過第一個圓形之外的部分 (也就是黃色區塊)，就都是 colorStops 設定為 0 顏色 (黃色) 。

完整程式碼

// 圓角
rect5.setGradient('fill', {
  type: 'radial',
  r1: 75,
  x1: 0,
  y1: 0,
  r2: 0,
  x2: 0,
  y2: 0,
  colorStops: {
    0: 'yellow',
    1: 'red'
  }
})

今日小結

學習的 fabricjs 漸層的用法

• 線性漸層
• 圓形漸層

本日 codepen