在浏览器中捕获捏缩放
[英]Catch pinch-zoom in browser
问题描述
我有一个Web应用程序，基本上是一个可以绘制的画布。 我正在处理绘图 - 通过鼠标或单指触摸 - 它运行良好。
画布比屏幕大，我需要实现自己的缩放机制（因为我只想缩放画布，而不是整个画面）。 我已经为wheel事件添加了一个处理程序，并且我正确处理了Control-Wheels。 现在我需要处理捏缩放。
我的画布作为track-action: pinch-zoom CSS设置。 这使得两个手指滑动滚动，这是非常好的。 我想让浏览器处理捏缩放，但我想自己处理缩放逻辑（就像我用鼠标滚轮一样）。
有没有办法捕捉捏缩放事件并覆盖缩放行为？
我在Android上使用Chrome，但这种技术也适用于iOS上的Safari。
1 个解决方案
解决方案1
3 已采纳 2019-03-13 10:28:56
好主意顺便说一下。 我在codepen上找到了值得你花时间的东西 。 我也将它剥了一下并插入下面的片段。 让我知道它是否对你有帮助。 另外，如果你想使用库，你可以尝试使用hammer.js或jgestures进行缩放缩放手势。
var image_x = 0, image_y = 0; var zoom = 0.5; var mouse_x = 0, mouse_y = 0, finger_dist = 0; var source_image_obj = new Image(); source_image_obj.addEventListener('load', function () { reset_settings(); }, false); // Reset (x,y,zoom) when new image loads function load_url() { source_image_obj.src = document.getElementById("theurl").value; // load the image } function update_canvas() { var mainCanvas = document.getElementById("mainCanvas"); var mainCanvasCTX = document.getElementById("mainCanvas").getContext("2d"); var canvas_w = mainCanvas.width, canvas_h = mainCanvas.height; // make things easier to read below // Keep picture in bounds if (image_x - (canvas_w * zoom / 2) > source_image_obj.width) image_x = source_image_obj.width + (canvas_w * zoom / 2); if (image_y - (canvas_h * zoom / 2) > source_image_obj.height) image_y = source_image_obj.height + (canvas_h * zoom / 2); if (image_x + (canvas_w * zoom / 2) < 0) image_x = 0 - (canvas_w * zoom / 2); if (image_y + (canvas_h * zoom / 2) < 0) image_y = 0 - (canvas_h * zoom / 2); // Draw the scaled image onto the canvas mainCanvasCTX.clearRect(0, 0, canvas_w, canvas_h); mainCanvasCTX.drawImage(source_image_obj, image_x - (canvas_w * zoom / 2), image_y - (canvas_h * zoom / 2), canvas_w * zoom, canvas_h * zoom, 0, 0, canvas_w, canvas_h); } function reset_settings() { image_x = source_image_obj.width / 2; image_y = source_image_obj.height / 2; zoom = 1; update_canvas(); // Draw the image in its new position } document.addEventListener('wheel', function (e) { if (e.deltaY < 0) { zoom = zoom * 1.5; } else { zoom = zoom / 1.5; } update_canvas(); }, false); document.addEventListener('mousemove', function (e) { if (e.buttons > 0) { window.getSelection().empty(); image_x = image_x + zoom * (mouse_x - e.clientX); image_y = image_y + zoom * (mouse_y - e.clientY); } mouse_x = e.clientX; mouse_y = e.clientY; // Save for next time update_canvas(); // draw the image in its new position }, false); function get_distance(e) { var diffX = e.touches[0].clientX - e.touches[1].clientX; var diffY = e.touches[0].clientY - e.touches[1].clientY; return Math.sqrt(diffX * diffX + diffY * diffY); // Pythagorean theorem } document.addEventListener('touchstart', function (e) { if (e.touches.length > 1) { // if multiple touches (pinch zooming) finger_dist = get_distance(e); // Save current finger distance } // Else just moving around mouse_x = e.touches[0].clientX; // Save finger position mouse_y = e.touches[0].clientY; // }, false); document.addEventListener('touchmove', function (e) { e.preventDefault(); // Stop the window from moving if (e.touches.length > 1) { // If pinch-zooming var new_finger_dist = get_distance(e); // Get current distance between fingers zoom = zoom * Math.abs(finger_dist / new_finger_dist); // Zoom is proportional to change finger_dist = new_finger_dist; // Save current distance for next time } else { // Else just moving around image_x = image_x + (zoom * (mouse_x - e.touches[0].clientX)); // Move the image image_y = image_y + (zoom * (mouse_y - e.touches[0].clientY)); // mouse_x = e.touches[0].clientX; // Save finger position for next time mouse_y = e.touches[0].clientY; // } update_canvas(); // draw the new position }, false); document.addEventListener('touchend', function (e) { mouse_x = e.touches[0].clientX; mouse_y = e.touches[0].clientY; // could be down to 1 finger, back to moving image }, false);
* { margin: 0; padding: 0; box-sizing: border-box; } canvas { background: #e74c3c; border: 4px solid black; } .box-photo { border: 1px dashed black; } .box-photo img { width: 100%; }
<html> <head> <meta charset="utf-8" /> <body onload="load_url();"> <div class="box"> <div class="box-photo"> <canvas id="mainCanvas" width="500" height="600"> <input id="theurl" value="https://mlb-s1-p.mlstatic.com/relogio-mondaine-classico-78527-original-a-prova-dagua-202101-MLB20273713546_042015-F.jpg"> Your browser does not support the HTML5 canvas tag. </canvas> </div> </div> </body> </html>
在 event.preventDefault() 之后对 iOS Safari 进行手动捏合缩放事件处理；
[英]Manual Pinch-Zoom event handling on iOS Safari after event.preventDefault();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.