Código JavaScript que funciona com um mouse não funciona com uma mesa digitalizadora.

Coisas que eu quero fazer

O código JavaScript que funciona com um mouse não funciona com uma mesa digitalizadora.

Este artigo resume as revisões feitas pelo autor.

O aplicativo modificado é um aplicativo de desenho que utiliza uma tela. Esta é uma descrição das modificações feitas para tornar o aplicativo compatível com mesas digitalizadoras. (O aplicativo será modificado para funcionar tanto com mesas digitalizadoras quanto com mouses.)

Em relação à compatibilidade com smartphones/tablets

A compatibilidade com smartphones/tablets deve ser basicamente a mesma que a compatibilidade com mesas digitalizadoras, mas ainda não a testamos.

Problemas e correções

Não haverá eventos relacionados a ratos.

Ao usar uma mesa digitalizadora, não recebi eventos de mousedown, mousemove ou mouseup.

As mesas digitalizadoras recebem eventos de toque, não eventos de mouse.

Cada evento precisa ser substituído da seguinte forma:

Para que o mouse e a mesa digitalizadora se comportassem de forma semelhante, fiz as seguintes modificações: (Fiz com que a mesma função fosse chamada ao usar o mouse e a mesa digitalizadora.)

Antes da revisão:

	canvas.addEventListener('mousedown', startDrag, false);
	canvas.addEventListener('mousemove', whileDrag, false);
	canvas.addEventListener('mouseup', endDrag, false);

Após a correção:

	canvas.addEventListener('mousedown', startDrag, false);
	canvas.addEventListener('touchstart', startDrag, false);
	canvas.addEventListener('mousemove', whileDrag, false);
	canvas.addEventListener('touchmove', whileDrag, false);
	canvas.addEventListener('mouseup', endDrag, false);
	canvas.addEventListener('touchend', endDrag, false);

Não foi possível recuperar offsetX/offsetY do evento.

A correção acima permitirá que o evento seja recebido, mas não consigo obter event.offsetX/offsetY do evento, que é um argumento para o retorno de chamada.

Isso ocorre porque os eventos de toque e os eventos do mouse são diferentes. Além disso, os eventos de toque não possuem deslocamento X/deslocamento Y. Portanto, você precisa calculá-los da seguinte forma:

`element` é o elemento de referência. Você pode obtê-lo usando `document.getElementById`, etc.

const offsetX = event.touches[0].clientX - element.getBoundingClientRect().left
const offsetY = event.touches[0].clientY - element.getBoundingClientRect().top

Criei a seguinte função para que funcione tanto com um mouse quanto com uma mesa digitalizadora.

Se `event.offsetX/Y` existir, será retornado tal como está; caso contrário, será calculado e retornado.

function getOffesetX(event,id) {
	if (event.offsetX != undefined) return event.offsetX;
	return event.touches[0].clientX - document.getElementById(id).getBoundingClientRect().left
}
function getOffesetY(event,id) {
	if (event.offsetY != undefined) return event.offsetY;
	return event.touches[0].clientY - document.getElementById(id).getBoundingClientRect().top
}

Aqui, estamos falando de offsetX/Y, mas não há informações de coordenadas como clientX/Y, nem event.clientX.event.touches[0]O valor está salvo abaixo. (O motivo de `touches` ser uma matriz é que vários toques podem ocorrer simultaneamente em smartphones, etc.) Consulte a página seguinte para obter mais detalhes.

Touch - Web API | MDN

Touch インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。

developer.mozilla.org

Deslizar a tela enquanto move a caneta (arrastando)

Quando movo a caneta para cima e para baixo, o aplicativo funciona como esperado, mas, ao mesmo tempo, o navegador começa a rolar a página.

Você pode impedir a rolagem interrompendo as ações iniciais do navegador durante o arrasto, usando o seguinte método.

Personalização recomendada

Você pode interromper o comportamento inicial chamando event.preventDefault() na função chamada pelo evento touchmove, como mostrado abaixo.

Perceber

Encontrei algo preocupante na seguinte página: `preventDefault` pode não funcionar dependendo do navegador.

Se não estiver funcionando como esperado, as seguintes soluções podem resolver o problema.

Antes da revisão:

canvas.addEventListener('mousemove', whileDrag, false);

Após a correção:

canvas.addEventListener('mousemove', whileDrag, {passive:false});

EventTarget: addEventListener() メソッド - Web API | MDN

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

developer.mozilla.org

canvas.addEventListener('touchmove', whileDrag, false);
function whileDrag(event) {
	event.preventDefault()

Resultado

O aplicativo em questão agora funciona com tablets gráficos após a correção dos problemas mencionados acima.