Fabric.js で部分的にマスクして切り抜くためのclipTo(JavaScript)

相変わらずのググり力でclipToにたどり着けなかったのでめも.

直近HauVisualizerの作成などで必要になってこまっていた.
freeDrawingモードで絵にスプレーをかけたあとで保存時にclipしてやるために実装.

canvas.clipToに対してどのような切り抜きをするかを関数で渡してやる.

今回は下記のnumbersにようにclip-pathで設定されたような値から%を消した値を抜き出して、それに応じたマスク画像を作成した.

moveToでどれでもよいので開始点に移動して、そこから隣接する辺を追っていく.lineToで結ぶ.一周したら終了.

これをやってからrenderAllしてtoDataURLで保存すれば、fabricJSのcanvasのうちclipToのマスクされた部分だけ残り、他は消えて保存される.

消えた部分はtransparentになる.

About the author

コメントを残す