キャンバスは拡大縮小する際に、マウスの現在地を拡大縮小の原点として設定できると、拡大縮小の利用幅が大きく広がる。
拡大縮小の原点にマウスポインタを置いておく必要があるため、拡大縮小操作には、マウスホイール等を使うことになる。
検知するイベントとしてはマウスホイールだけでも可能だが、今回はCtrlキー+マウスホイール操作を検知で拡大縮小を行う。
スポンサーリンク
コントロールキー操作の検知処理
コントロールキーが押下された状態かどうかを判別する。
var ctrlFlg = false;
/**
* keyDownFunc
* キーボード押下時に呼び出される処理
*/
function keyDownFunc(e){
//コントロールキー
ctrlFlg = e.ctrlKey; //ctrlキーが押下された場合、trueが設定される。
}
/**
* keyUpFunc
* キーボードを離した時に呼び出される処理
*/
function keyUpFunc(e){
//コントロールキー
ctrlFlg = e.ctrlKey; //ctrlキーが離された場合、falseが設定される。
}
document.addEventListener("keydown", keyDownFunc);
document.addEventListener("keyup", keyUpFunc);
この例だけだと、keydown時もkeyup時も同じ関数を呼び出して問題ないが、他のキー操作処理も入ってくると、別々の処理を行うことが多いので分けておく。
マウスホイール操作の検知処理
マウスホイール操作のイベントリスニングは、canvas.onのmouse:wheelで行う。
function load(){
canvas = new fabric.Canvas('canvas');
//キャンバス上でのマウスホイール操作をハンドリングする
canvas.on('mouse:wheel', function(e) { mousewheel(e); });
window.addEventListener('DOMContentLoaded', load, false);
}
ブラウザのマウスホイール操作による拡大縮小の抑止
ctrlキー+マウスホイール操作によるブラウザ自体の拡大縮小は、今回の処理と操作が被るため、抑止しておく。
抑止方法は以下の記事を参照。
キャンバスの拡大縮小処理
キャンバス上でCtrlキー+マウスホイール操作が行われた場合に、マウス位置を原点としてキャンバスの拡大縮小を行う。
function mousewheel(e) {
if(ctrlFlg) {
//ポインタの位置取得
const mouseX = e.pointer.x;
const mouseY = e.pointer.y;
//ホイール回転の取得
const deltaY = e.e.wheelDeltaY;
//現在の拡大倍率の取得
let zoom = canvas.getZoom();
//マウス位置を原点として拡大縮小
canvas.zoomToPoint(new fabric.Point(mouseX, mouseY), zoom + deltaY/1200 );
}
}
wheelDeltaY / 1200 で0.1倍ずつ拡大縮小が可能となる。
ちなみに、setZoom(倍率)を使用した場合、キャンバスの左上(x = 0, y = 0)を原点として拡大縮小をすることになるが、動作としては、setZoom内で
zoomToPoint( new fabric.Point(0, 0), 倍率); を実行している模様。
function load(){
canvas = new fabric.Canvas('canvas');
//キャンバス上でのマウスホイール操作をハンドリングする
canvas.on('mouse:wheel', function(e) { mousewheel(e); });
window.addEventListener('DOMContentLoaded', load, false);
}
スポンサーリンク
スポンサーリンク