【JavaScript】Fabric.jsで矩形にオブジェクトIDをつける
MAX
MAX999blog
Fabric.jsでは、setZoomやzoomToPointを使うことでキャンバスの拡大縮小が可能となる。
原点を変えて拡大縮小を繰り返すと、拡大縮小だけでは元の状態に戻ることが難しくなることがある。
そんな時には、setZoomとabsolutePanを使うことで、キャンバスを元の状態にリセットすることができる。
キャンバスの拡大縮小は以下の記事を参照。
マウス位置を原点としてホイール操作で拡大縮小できるのは便利だが、原点を自由に移動できるからこそ、元に戻すのは至難の業となる。。。
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)からの距離を指定して移動する。