Une modification relativement mineure de l'API Touch dans Chrome a été apportée dans Chrome 39, qui a introduit une version fonctionnelle de l'attribut webkitRotationAngle sur l'objet TouchEvent. Dans Chrome 45 (bêta en juillet 2015), il n'est plus précédé du préfixe rotationAngle, ce qui rend notre implémentation plus conforme à la spécification TouchEvent et à Firefox.
Bien que rotationAngle existe depuis un certain temps, il est utile d'expliquer ce qu'est rotationAngle, car il ouvre des possibilités d'utilisation plus intéressantes des gestes tactiles, en particulier sur les appareils mobiles.
Techniquement, l'angle de rotation correspond au nombre de degrés (entre 0 et 90) de l'ellipse de la zone de contact définie par Touch.radiusX et Touch.radiusY.
C'est bien, non ? (Notez que j'ai découvert que Chrome sur Android ne verrouille pas les valeurs radiusX et radiusY à 64 px, mais qu'il les fait varier en fonction de la taille de contact de l'écran.)
Qu'est-ce que cela signifie en réalité ?
Il s'agit d'un moyen de représenter avec précision la taille, la forme et l'orientation du doigt de l'utilisateur sur un écran. Les utilisateurs ne tappuient pas toujours sur l'écran avec la pointe de leur doigt, mais ils appuient fréquemment sur l'écran comme s'ils donnaient une empreinte digitale à la police. Sans rotationAngle, vous obtiendriez simplement la largeur et la hauteur du geste tactile. Avec rotationAngle, vous obtenez une rotation de 90 degrés (0 correspond à la verticale et 90 à l'horizontale). Pourquoi seulement 90 degrés ? Vous n'avez besoin que de 90 degrés, car lorsque vous dépassez ces angles, radiusX et radiusY changent pour s'adapter.
Autre point intéressant : la zone de contact du doigt de l'utilisateur change à mesure qu'il varie le degré de pression de son doigt sur l'écran. Il ne remplace pas directement force, mais vous pouvez distinguer les pinceaux légers à l'écran, car ils auront une surface plus petite qu'une pression plus forte.
Comment l'utiliser ?
Tout d'abord, vous avez besoin d'un appareil capable de détecter ce problème. Un Nexus 10 convient parfaitement. Un bon exemple est l'exemple de peinture de Rick Byers. Voici comment l'utiliser sans canevas.
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
Dans quel cas utiliseriez-vous cette méthode ?
Il existe des cas évidents où cela présente un avantage immédiat pour l'utilisateur:
- Par exemple, les applications Web de peinture et de manipulation d'images peuvent utiliser ces informations pour modifier le trait ou les effets appliqués au canevas. Vous pouvez utiliser le rayon tactile pour modifier la taille du pinceau et combiner les valeurs dans rotationAngle pour varier l'angle de contact du pinceau sur le canevas.
- Reconnaissance améliorée des gestes: si vous comprenez le paramètre rotationAngle, vous pouvez créer un geste à un seul doigt pour faire pivoter un objet.
Tous les appareils sont-ils compatibles avec cette fonctionnalité ?
Non. Ce n'est pas encore très courant. Si vous possédez un Nexus 10, un écran semblable à celui-ci s'affiche :
Crédit image : Rick Byers.
Lorsqu'un appareil ne peut pas déterminer l'angle de rotation d'un geste tactile, la valeur rotationAngle est égale à 0, et les valeurs radiusX et radiusY sont égales (mais peuvent varier en fonction de la surface de la surface tactile actuelle).
Why bother?
Bonne question ! Comme de nombreuses fonctionnalités sur le Web, il s'agit d'une expérience additive.Les événements tactiles
fonctionnent lorsqu'ils sont compatibles. Si les valeurs de rayon et de rotation sont disponibles, vous pouvez améliorer votre application pour offrir une expérience plus performante à l'utilisateur. Tous les utilisateurs ne disposent pas d'une tablette Wacom, mais si c'est le cas, de nombreuses applications de peinture en tirent parti.
Qu'en est-il des événements de pointeur ?
Il s'agit simplement de s'assurer que nous disposons d'une API d'événement tactile entièrement développée pour les développeurs qui s'appuient sur elle. Vous voyez comment j'ai esquivé la question ? Plus sérieusement, si vous souhaitez suivre l'implémentation de PointerEvent dans Blink, vous pouvez ajouter une étoile à l'issue 471824 et lire le document de suivi de Rick Byers.