fabric.jsで塗りつぶしにグラデーションを設定するには

つい最近fabric.jsを使い始めました。

このライブラリは多機能でお気に入りです。

ただ１つ問題点が・・・

塗りつぶし(fill)にグラデーションが効きません。

公式リファレンスに誤りがあったので、
fabric.jsでのグラデーションについてまとめ。

このページの目次

v4.x以降ではsetGradientが廃止された模様
v4.x以降はfabric.Gradientをfillに適用すればOK
ここまでのまとめ

v4.x以降ではsetGradientが廃止された模様

v3.x以前は次みたいにグラデーションできました。

▼ テキストを赤から青に線形グラデーション

text.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: text.width,
  y2: text.height,
  colorStops: {
    0: "red",
    1: "blue"
  }
});

text.setGradient('fill', {

x1: 0,

y1: 0,

x2: text.width,

y2: text.height,

colorStops: {

0: "red",

1: "blue"

}

});

今まではこのコードのように始点座標と終点座標を渡し、colorStops に位置と色を列挙したオブジェクトを渡せばグラデーションできてました。

でも setGradient はv4.x以降は廃止されたようです。

実際に次のような投稿を見つけたので

How to set gradient on an object? The example in the documentation does not work. #6609

Version
4.1.0

Steps to reproduce
Run the fiddle. Everything works fine because "setGradient()" call is commented out
Uncomment the "setGradient()" line and re-run. The error appears in the console: circle.setGradient is not a function

Expected Behavior
Need to know how to set gradient since the example in the documentation does not work.

See http://fabricjs.com/v4-breaking-changes

The docs haven't been updated yet for v4 so some of the information is out of date.

引用元　：　https://github.com/fabricjs/fabric.js/issues/6609

この回答を見るとv4では setGradient() が廃止されたものの、公式ドキュメントは最新に更新されてない感じですね。現在もグラデーションのドキュメントは古いままです (-_-)

v4.x以降は全く別のやり方になるので要注意

v4.x以降はfabric.Gradientをfillに適用すればOK

ではグラデーションの正しい方法について

これは fabric.Gradient を使えばOKです。

例えば次のようなコードを書いてみました。

▼ テキストを赤から青にグラデーション

/// ITextオブジェクト作成
var itext = new fabric.IText('myfont',{
  left: 0,
  top: 30,
  text: 'テストテキスト',
  fontSize: 30,
});

/// 赤から青のグラデーション追加
itext.set('fill', new fabric.Gradient({
  type: 'linear',
  coords:{
    x1:0, 
    y1:0,
    x2: itext.width,
    y2: itext.height
  },
  colorStops: [
    {color: 'red', offset: 0.0},
    {color: 'blue', offset: 1.0}
  ]
}));

/// ITextオブジェクト作成

var itext = new fabric.IText('myfont',{

left: 0,

top: 30,

text: 'テストテキスト',

fontSize: 30,

});

/// 赤から青のグラデーション追加

itext.set('fill', new fabric.Gradient({

type: 'linear',

coords:{

x1:0,

y1:0,

x2: itext.width,

y2: itext.height

colorStops: [

{color: 'red', offset: 0.0},

{color: 'blue', offset: 1.0}

]

}));

このコードのように塗りつぶしプロパティ(fill)に new fabric.Gradient({...}) を渡す方式になりました。v4.x以降はこの方法でないと動きません。

そして fabric.Gradientに渡す引数ですが・・・

type
グラデーションの種類。取れる値は'linear'または'radial'
coords
グラデーションの終点座標と視点座標。上コードの {x1:0, y1:0, x2: itext.width, y2: itext.height } だと対象オブジェクト全体にかかる
colorStops
グラデーションの位置と色を列挙した配列。上コードだと {color: 'red', offset: 0.0}, {color: 'blue', offset: 1.0} の場合だと始点を赤、終点を青で設定している。offsetの範囲は0～100の間

基本的にはこれらのプロパティだけでOK

グラデーション適用したテキストがこちら