Fabric.js为图形填入渐层色

2018-11-27 20:28:34
1296次阅读
1个评论
今天分别介绍两部分

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

收藏00

登录 后评论。没有帐号? 注册 一个。