■ スワイプ / マウスホイールイベントを拾うには...
問題点
ブラウザ(IE、Firefox、Chrome etc)によって拾い方が異なる。http://codaholic.org/?p=1139
今回の解決案
jQuery を使う
■ サンプル
例１：マウスホイールによる画像を拡大・縮小する
https://blogs.yahoo.co.jp/dk521123/37720717.htmlの『例３：画像を拡大・縮小する』をスワイプ / マウスホイール対応する
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h1>Demo for canvas</h1> <canvas id="sample" width="1000" height="1000"></canvas> <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script type="text/javascript"> $(function(){ var canvas = document.getElementById('sample'); var context = canvas.getContext('2d'); var image = new Image(); image.crossOrigin = ""; image.src = "https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg"; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); } var scale = 1; var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(event){ event.preventDefault(); var delta = event.originalEvent.deltaY ? -(event.originalEvent.deltaY) : event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : -(event.originalEvent.detail); if (delta < 0){ scale = scale - 0.01; } else { scale = scale + 0.01; } zoom(scale); }); function zoom(scale) { // 一旦クリア context.clearRect(0, 0, canvas.width, canvas.height); // 拡大縮小 context.scale(scale, scale); // 再描画 context.drawImage(image, 0, 0); // 変換マトリクスを元に戻す context.scale(1 / scale, 1 / scale); } }); </script> </body> </html>
