FabricJS

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

MAX

キャンバスは拡大縮小する際に、マウスの現在地を拡大縮小の原点として設定できると、拡大縮小の利用幅が大きく広がる。

拡大縮小の原点にマウスポインタを置いておく必要があるため、拡大縮小操作には、マウスホイール等を使うことになる。

検知するイベントとしてはマウスホイールだけでも可能だが、今回はCtrlキー+マウスホイール操作を検知で拡大縮小を行う。

スポンサーリンク

コントロールキー操作の検知処理

コントロールキーが押下された状態かどうかを判別する。

1var ctrlFlg = false;
2/**
3 * keyDownFunc
4 * キーボード押下時に呼び出される処理
5 */
6function keyDownFunc(e){
7    //コントロールキー
8    ctrlFlg = e.ctrlKey;    //ctrlキーが押下された場合、trueが設定される。
9}
10
11/**
12 * keyUpFunc
13 * キーボードを離した時に呼び出される処理
14 */
15function keyUpFunc(e){
16    //コントロールキー
17    ctrlFlg = e.ctrlKey;    //ctrlキーが離された場合、falseが設定される。
18}
19
20document.addEventListener("keydown", keyDownFunc);
21document.addEventListener("keyup", keyUpFunc);

この例だけだと、keydown時もkeyup時も同じ関数を呼び出して問題ないが、他のキー操作処理も入ってくると、別々の処理を行うことが多いので分けておく。

マウスホイール操作の検知処理

マウスホイール操作のイベントリスニングは、canvas.onのmouse:wheelで行う。

1function load(){
2  canvas = new fabric.Canvas('canvas');
3  //キャンバス上でのマウスホイール操作をハンドリングする
4  canvas.on('mouse:wheel', function(e) { mousewheel(e); });
5
6  window.addEventListener('DOMContentLoaded', load, false);
7}

ブラウザのマウスホイール操作による拡大縮小の抑止

ctrlキー+マウスホイール操作によるブラウザ自体の拡大縮小は、今回の処理と操作が被るため、抑止しておく。

抑止方法は以下の記事を参照。

あわせて読みたい
【JavaScript】【ブラウザ】Chromeでコントロールキーとマウスホイールによる拡大縮小を抑止する
【JavaScript】【ブラウザ】Chromeでコントロールキーとマウスホイールによる拡大縮小を抑止する

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

キャンバス上でCtrlキー+マウスホイール操作が行われた場合に、マウス位置を原点としてキャンバスの拡大縮小を行う。

1function mousewheel(e) {
2    if(ctrlFlg) {
3        //ポインタの位置取得
4        const mouseX = e.pointer.x;
5        const mouseY = e.pointer.y;
6
7        //ホイール回転の取得
8        const deltaY = e.e.wheelDeltaY;
9
10        //現在の拡大倍率の取得
11        let zoom = canvas.getZoom();
12
13        //マウス位置を原点として拡大縮小
14        canvas.zoomToPoint(new fabric.Point(mouseX, mouseY), zoom + deltaY/1200 );
15    }
16}

wheelDeltaY / 1200 で0.1倍ずつ拡大縮小が可能となる。

ちなみに、setZoom(倍率)を使用した場合、キャンバスの左上(x = 0, y = 0)を原点として拡大縮小をすることになるが、動作としては、setZoom内で

zoomToPoint( new fabric.Point(0, 0), 倍率); を実行している模様。

1function load(){
2  canvas = new fabric.Canvas('canvas');
3  //キャンバス上でのマウスホイール操作をハンドリングする
4  canvas.on('mouse:wheel', function(e) { mousewheel(e); });
5
6  window.addEventListener('DOMContentLoaded', load, false);
7}​
スポンサーリンク
ABOUT ME
MAX
MAX
ITエンジニア、データサイエンティスト
新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。
スポンサーリンク
記事URLをコピーしました