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)からの距離を指定して移動する。
スポンサーリンク
スポンサーリンク