ズームイン時とアウト時の現在のデータを処理する方法

Question

マウスホイールをスクロールすると、グラフのキャンバスがマウスの位置でズームイン/ズームアウトできることを確認するにはどうすればよいですか？

私のキャンバスチャートでは、chart.jsやd3.jsなどのライブラリを使用していません。マウスの位置を中心にズームイン/ズームアウトすることができると予想していますが、ズームインとズームアウトで値が変わります。マウスの位置の中心点が座標系の変更の影響を受けないことを確認する方法。

Answer 1

CSS transformプロパティscale()を使用している場合は、transform-originという別のルールを設定できます。 scale()を適用する前に画面の中央に設定すると、ページが正しく拡大されます。スケールを（） `ズームイン、ズームアウトする：

let scale = 1; 
let scrollFactor = -0.1; 
$(window).bind('wheel mousewheel', function(e){ 

    let scroll = e.originalEvent.deltaY; 
    let sign = Math.sign(scroll); 
    let newScale = Math.round((scale + scrollFactor * sign)*100)/100; 

    // you could set an if statement here before calling zoom() to 
    // set a lower and higher zoom limit 
    zoom(newScale, [e.pageX, e.pageY]); 


});