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

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

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

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

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

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

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

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

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

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

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