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

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

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

ただ1つ問題点が・・・

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

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

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

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

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

今まではこのコードのように始点座標と終点座標を渡し、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です。

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

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

このコードのように塗りつぶしプロパティ(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

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

今回はテキストに対してですが、グラデーションはfabric.jsのあらゆるオブジェクトに適用可能です。もちろん図形とか画像に対しても適用できます。

ここまでのまとめ

グラデーションの注意点は次の通り

  • v4.x未満ではsetGradientが使えた
  • v4.x以降ではfabric.Gradientをfillに適用

こういう変更があるので要注意

ドキュメントも最新にしてほしいですね (-_-;)

以上、fabric.jsでのグラデーションでした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください