在瀏覽器中捕獲捏縮放
[英]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.