【JavaScript】【Fabric.js】拡大縮小したキャンバスをリセットして元に戻す

Fabric.jsでは、setZoomやzoomToPointを使うことでキャンバスの拡大縮小が可能となる。

原点を変えて拡大縮小を繰り返すと、拡大縮小だけでは元の状態に戻ることが難しくなることがある。

そんな時には、setZoomとabsolutePanを使うことで、キャンバスを元の状態にリセットすることができる。

キャンバスの拡大縮小処理

キャンバスの拡大縮小は以下の記事を参照。

あわせて読みたい

【JavaScript】【Fabric.js】コントロールキーとマウスホイール操作でキャンバスを拡大縮小する

マウス位置を原点としてホイール操作で拡大縮小できるのは便利だが、原点を自由に移動できるからこそ、元に戻すのは至難の業となる。。。

キャンバスの拡大縮小のリセット

setZoomでキャンバスの倍率を1に設定し、 absolutePan で左上に移動することで、元の状態に戻れる。

1/**
2 * zoomResetCanvas()
3 * キャンバスの拡大・縮小をリセットする。
4 */ 
5function zoomResetCanvas(){
6  //倍率を1に設定する
7  canvas.setZoom(1);
8  //左上を原点に移動する
9  canvas.absolutePan( new fabric.Point(0,0) );
10}

absolutePan(point)はキャンバスの原点（left, top)からの距離を指定して移動する。

MAX

ITエンジニア、データサイエンティスト

XContact

新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。