Интернет - Как провести различие между касанием пальцем и касанием стилуса? - PullRequest
Новая
       17

Интернет - Как провести различие между касанием пальцем и касанием стилуса?

4 голосов
/ 15 апреля 2020

Я пытаюсь сделать веб-приложение для рисования. Я хотел бы нарисовать стилусом и переместить холст моей рукой. Как различить guish между этими двумя?

В официальных документах по MDN я не нашел ничего перспективного.

1 Ответ

2 голосов
/ 15 апреля 2020

Вы можете с достаточно высокой степенью достоверности определить, происходит ли касание пальцем или стилусом, захватив PointerEvent и проверив свойства его ширины и высоты, которые представляют размер наконечника.

Стилус обычно имеет меньшую ширину и высота, чем палец.

Обучение приложения распознаванию пальца и стилуса

Поскольку размер наконечника, вероятно, различается для разных экранов, пальцев и стилусов, возможной стратегией было бы заставить пользователя научить приложение распознавать различные типы касаний:

Команда «Это палец», за которой следует несколько касаний пальца, пока приложение не получит хороший образец размеров.

Команда «Это стилус», после которого следует несколько касаний стилуса.

MDN для Интерфейс PointerEvent .

Демонстрация, показывающая размер кончика стилуса (или пальца) каждого экрана касания .

Это будет отображать размер наконечника прикосновения или нажмите на экран: 

let counter = 0;
// listen for 'pointerdown' events, detect tip size
window.addEventListener('pointerdown', (evt) => {
  const w = Number(evt.width).toFixed(1);
  const h = Number(evt.height).toFixed(1);
  const div = document.getElementById('result');
  counter++;
  div.innerHTML = `${counter}: stylus width: ${w}, height: ${h}`;
});
body {
  background-color: #eee;
  color: black;
}

#result {
  margin: 0.5rem;
  width: 18rem;
  min-height: 2rem;
  padding: 0.5rem;
  border: 1px solid gray;
  color: green;
}
<h4>Test of Pointer Stylus Tip Size</h4>
<p>Touch or click anywhere...</p>
<div id="result"></div>
...