Une modification relativement mineure de l'API Touch dans Chrome a été introduite dans Chrome 39, qui a introduit une version fonctionnelle de l'attribut webkitRotationAngle sur l'objet TouchEvent. Désormais, dans Chrome 45 (bêta en juillet 2015), il n'est pas préfixé en tant que rotationAngle, ce qui rend notre implémentation plus conforme aux spécifications TouchEvent et à Firefox.
Bien qu'il existe depuis un certain temps, il est utile d'expliquer ce qu'est rotationAngle, car il permet une utilisation plus intéressante des gestes tactiles, en particulier sur les appareils mobiles.
Techniquement, l'angle de rotation est le nombre de degrés (entre 0 et 90) de l'ellipse de la zone de contact définie par Touch.radiusX et Touch.radiusY.
Plutôt cool, non ? (Notez que j'ai découvert que Chrome sur Android ne verrouille pas les valeurs radiusX et radiusY sur 64 px, mais les fait varier en fonction de la taille de contact de l'écran.)
Qu'est-ce que cela signifie ?
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 n'appuient pas toujours sur l'écran avec le bout de leur doigt, mais plutôt avec la pulpe, 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 étant vertical et 90 étant horizontal). Pourquoi seulement 90 degrés ? Vous n'avez besoin que de 90 degrés, car lorsque vous dépassez ces angles, radiusX et radiusY s'adaptent.
Autre avantage : la zone de contact du doigt de l'utilisateur change en fonction de la pression qu'il exerce sur l'écran. Il ne remplace pas directement force, mais vous pouvez distinguer les effleurements sur l'écran, car ils ont 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 cela. Une Nexus 10 fera parfaitement l'affaire. Pour un bon exemple, consultez directement l'exemple de peinture de Rick Byers. Pour ne pas être en reste, 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;
Où utiliseriez-vous cela en pratique ?
Il existe des cas évidents où cela serait immédiatement bénéfique 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 rotationAngle pour faire varier l'angle de contact du pinceau sur le canevas.
- Reconnaissance améliorée des gestes : si vous comprenez le rotationAngle, vous pouvez créer un geste à 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, vous verrez quelque chose comme ceci :
Crédit image : Rick Byers.
Lorsqu'un appareil ne peut pas comprendre l'angle de rotation d'un contact, rotationAngle est égal à 0, et les valeurs radiusX et radiusY sont égales (mais peuvent varier en fonction de la surface de contact 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 pris en charge. Si les valeurs de rayon et de rotation sont disponibles, vous pouvez améliorer votre application pour offrir une meilleure expérience à l'utilisateur. Tous les utilisateurs n'ont pas de tablette Wacom, mais lorsqu'elle est présente, 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énements tactiles complète pour les développeurs qui l'utilisent. Vous avez vu comment j'ai un peu esquivé la question ? Plus sérieusement, si vous souhaitez suivre l'implémentation de PointerEvent dans Blink, vous pouvez ajouter l'issue 471824 à vos favoris et lire le document de suivi de Rick Byers.