Fabric.js为图形填入渐层色

今天分别介绍两部分

线性渐层
圆形渐层
线性渐层 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'
    }
})

圆角范例

让我们再来看看另外一个范例，让我们更好理解圆形渐层。

建立的一个从两个圆心都在 (0,0)
第一个圆较大，设為半径 60
第二个圆设成非常小，这边直接设成 0
设定渐层的顏色由黄色到红色

如上图，我们看到一个圆角的渐层，而在超过第一个圆形之外的部分 (也就是黄色区块)，就都是 colorStops 设定為 0 顏色 (黄色) 。

完整程式码

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