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

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);

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}

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}

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}​