Une modification relativement mineure de l'API Touch dans Chrome a été introduite dans Chrome 39, qui introduit une version fonctionnelle de l'attribut webkitRotationAngle sur l'objet TouchEvent. Désormais disponible dans Chrome 45 (bêta en juillet 2015), il ne porte pas de préfixe rotationAngle, ce qui permet d'aligner notre implémentation sur la spécification TouchEvent et Firefox.
Bien qu'il existe depuis un certain temps, il est utile d'expliquer ce qu'est rotationAngle, car il permet d'utiliser des gestes tactiles plus intéressants, 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.
Euh, cool, non ? (Il est à noter que je me suis seulement rendu compte que Chrome sur Android ne verrouille pas les valeurs radiusX et radiusY à 64 px, mais que cela varie en fonction de la taille du contact sur l'écran.)
Qu'est-ce que cela signifie réellement ?
Considérez-la comme 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 n'appuient pas toujours sur l'écran avec la pointe de leur doigt, mais appuient souvent sur l'écran comme pour donner une empreinte digitale à la police. Sans rotationAngle, vous obtiendrez facilement l'étendue et la hauteur du geste tactile. Avec rotationAngle, vous obtenez 90 degrés de rotation (0 correspondant à la verticale et 90 à l'horizontale). Pourquoi seulement
90 degrés ? Vous n'avez besoin que de 90 degrés, car au fur et à mesure que vous vous déplacez, radiusX et radiusY changent pour s'adapter.
Autre avantage : la zone de contact du doigt de l'utilisateur change en fonction du degré de pression de son doigt sur l'écran. Il ne s'agit pas de remplacer directement force, mais vous pouvez faire la distinction entre les pinceaux clairs sur l'écran, car leur surface est plus petite qu'une pression plus intense.
Comment l'utiliser ?
Tout d'abord, vous avez besoin d'un appareil capable de détecter cela. Une Nexus 10 fera l'affaire. Un bon exemple consiste à regarder directement l'exemple de peinture réalisée par Rick Byers. Ne négligez pas cet aspect. Voici une manière de l'utiliser sans toile.
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;
Où utiliseriez-vous cela dans la pratique ?
Cela présente des avantages immédiats pour l'utilisateur:
- Les applications Web de peinture et de manipulation d'images, par exemple, peuvent exploiter ces informations pour modifier le trait ou les effets appliqués à la toile. Vous pouvez utiliser le rayon tactile pour modifier la taille du pinceau et combiner la propriété rotationAngle pour modifier l'angle de contact du pinceau sur le canevas.
- Reconnaissance des gestes améliorée: si vous comprenez l'angle de rotation, vous pouvez créer un geste d'un seul doigt pour faire pivoter un objet.
Tous les appareils sont-ils compatibles ?
Non, ce n'est pas encore très courant. Si vous avez une Nexus 10, ce message s'affiche :
Crédit photo : Rick Byers
Lorsqu'un appareil ne peut pas interpréter l'angle de rotation d'un toucher, la valeur rotationAngle sera 0, et les valeurs radiusX et radiusY seront égales (mais peuvent varier en fonction de la surface tactile actuelle).
Why bother?
Bonne question ! Comme de nombreuses fonctionnalités sur le Web, cette expérience se cumule.
Les événements tactiles fonctionnent s'ils sont compatibles. Si les valeurs de rayon et de rotation sont disponibles, vous pouvez améliorer votre application pour améliorer l'expérience utilisateur. Tous les utilisateurs ne possèdent pas de tablette Wacom, mais de nombreuses applications de peinture en profiteront au moment présent.
Qu'en est-il des événements de pointeur ?
Le but est ici de s'assurer que nous disposons d'une API d'événement tactile entièrement complète pour les développeurs qui en ont besoin. Voyez comment j'ai esquié un peu la question... Plus sérieusement, si vous souhaitez suivre l'implémentation de PointerEvent de Blink, vous pouvez ajouter le problème 471824 à vos favoris et lire le document de suivi de Rick Byers.