在画布中支持触摸界面 [英] Supporting Touch Interface in a canvas

问题描述

我使用画布，在其中通过设置Javascript支持鼠标拖动：

I use a canvas, in which I support mouse dragging by setting in Javascript:

• canvas.onmousedown


• canvas.onmouseup


• canvas.onmousemove

• canvas.onmousedown
• canvas.onmouseup
• canvas.onmousemove

这可行。我可以使用鼠标来支持拖动操作。

This works.. I can support drag operations with the mouse.

在iOS Safari浏览器中，用手指拖动不会触发鼠标功能。

On iOS safari browser, though, dragging with a finger does not trigger the mouse functions.

相反，整个网页只是上下滚动。

Instead, the entire webpage just scrolls up or down.

起初，我以为添加 ontouchmove 等可以解决此问题。

At first I thought adding ontouchmove and others, would fix this. But it does not.

移动设备上的浏览器如何分辨何时触摸画布，以及何时使浏览器自我显示？

How can the browser on a mobile device tell when touches are meant for the canvas, and when for the browser it self?

canvas.ontouchmove = function(ev) {
    var x = ev.touches[0].clientX;
    var y = ev.touches[0].clientY;
    if ( dragging) {
        drag(canvas, x, y);
    }
}

推荐答案

有是touchstart，touchmove和touchend。如果您希望浏览器不响应触摸事件，则需要告诉浏览器不要响应事件。您可以使用 addEventListener 代替 ontouchstart 并传递 {passive：false} 作为最后一个参数。否则，浏览器不会在响应触摸事件之前等待JavaScript。然后，您在传递给处理程序的事件对象上调用 preventDefault ，告诉浏览器不要执行正常操作（滚动窗口）

There is touchstart, touchmove, and touchend. If you want the browser to not respond itself to touch events then you need to tell it to not respond them. You do that by using addEventListener instead of ontouchstart and passing {passive: false} as the last argument. Otherwise the browser doesn't wait for JavaScript before responding to the touch events. You then call preventDefault on the event object passed to the handler to tell the browser not to do the normal thing (scroll the window)

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('touchstart', handleTouchStart, {passive: false});
canvas.addEventListener('touchmove', handleTouchMove);

function handleTouchStart(e) {
  e.preventDefault();
}

function handleTouchMove(e) {
  const rect = canvas.getBoundingClientRect();
  const cssX = e.touches[0].clientX - rect.left;
  const cssY = e.touches[0].clientY - rect.top;
  const pixelX = cssX * canvas.width  / rect.width;
  const pixelY = cssY * canvas.height / rect.height;
  ctx.fillStyle = `hsl(${performance.now() % 360 | 0},100%,50%)`;
  ctx.fillRect(pixelX - 15, pixelY - 15, 30, 30);
}

canvas {
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<h1>spacing</h1>
<canvas width="600" height="300"></canvas>
<h1>spacing1</h1>
<h1>spacing2</h1>
<h1>spacing3</h1>
<h1>spacing4</h1>
<h1>spacing5</h1>
<h1>spacing6</h1>
<h1>spacing7</h1>
<h1>spacing8</h1>
<h1>spacing9</h1>
<h1>spacing10</h1>
<h1>spacing11</h1>
<h1>spacing12</h1>
<h1>spacing13</h1>
<h1>spacing14</h1>

请注意是否有间距，以确保在您拖动手指时窗口会滚动，以显示在画布上拖动时窗口不会滚动。有了meta标签，因此浏览器在移动设备上的显示比例更加友好。

note the spacing is there to make sure there's enough space the window would scroll if you dragged your finger to show it doesn't scroll when you drag on the canvas. The meta tag is there so the browser, on mobile, shows a more mobile friendly scale.

这篇关于在画布中支持触摸界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！