Utiliser rotationAngle et touchRadius

Paul Kinlan

Une modification relativement mineure de l'API Touch dans Chrome a été introduite Chrome 39, introduit une version fonctionnelle de l'attribut webkitRotationAngle au niveau de la TouchEvent. Désormais, dans Chrome 45 (version bêta en juillet 2015), le préfixe rotationAngle est supprimé. afin d'aligner notre implémentation sur TouchEvent Spec et Firefox.

Bien qu'il existe depuis un moment, il est intéressant d'expliquer ce qu'est rotationAngle permet une utilisation plus intéressante du tactile des gestes en particulier sur les appareils mobiles.

Techniquement, l'angle de rotation correspond au nombre de degrés (entre 0 et 90) l'ellipse de zone de contact définie par Touch.radiusX et Touch.radiusY. Super, non ? (Il convient de noter que j'ai seulement découvert que Chrome Android ne verrouille pas les valeurs radiusX et radiusY sur 64 pixels, mais varie en fonction de la taille de contact de l'écran).

Qu'est-ce que cela signifie concrètement ?

Pensez-y comme un moyen de représenter avec précision la taille, la forme et l'orientation le doigt de l'utilisateur sur un écran. Les utilisateurs n'appuient pas toujours sur l'écran avec la pointe du bout du doigt, mais en appuyant assez souvent sur l'écran la police une empreinte. Sans rotationAngle, il vous suffirait d'obtenir la largeur et la hauteur du geste tactile. Avec rotationAngle, vous obtenir une rotation de 90 degrés (0 étant vertical et 90 horizontal). Pourquoi seulement 90 degrés ? Vous n'avez besoin que de 90 degrés, car plus vous dépassez ces angles, radiusX et radiusY seront modifiés pour s'adapter.

Une autre chose intéressante à ce sujet est que la zone de contact du doigt de l’utilisateur change car ils varient le degré de pression du doigt sur l'écran. Il ne s'agit pas Remplacement direct de force, mais vous pouvez faire la distinction entre les pinceaux légers à l'écran, car leur surface est plus petite qu'un appui plus fort.

Comment l'utiliser ?

Tout d'abord, vous avez besoin d'un appareil capable de détecter cela. Une Nexus 10 conviendra parfaitement. A un excellent exemple est de regarder directement Exemple de peinture de Rick Byers Ne sera pas dépassé mais voici un moyen de 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 cette fonctionnalité dans la pratique ?

Il existe des cas évidents où l'avantage immédiat pour l'utilisateur utilisateur:

  • Les applications Web de peinture et de manipulation d'images, par exemple, peuvent l'utiliser pour modifier le trait ou les effets appliqués au canevas. Vous pourriez modifiez la taille du pinceau à l'aide du rayon d'action rotationAngle pour faire varier l'angle de contact du pinceau sur le canevas.
  • Amélioration de la reconnaissance des gestes: si vous comprenez l'angle de rotation, vous pouvez créer un geste avec 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 possédez une Nexus 10, quelque chose comme ceci :

Capture d'écran de la rotation de l'angle tactile

Crédit photo : Rick Byers.

Lorsqu'un appareil ne parvient pas à comprendre l'angle de rotation d'un geste, rotationAngle sera égal à 0, et les valeurs radiusX et radiusY seront définies sur 0. égales (mais elles 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 complète.
Les événements tactiles fonctionnent s'ils sont compatibles, et si les valeurs de rayon et de rotation sont vous pouvez améliorer votre application pour offrir à l'utilisateur expérience. Les utilisateurs n'ont pas tous une tablette Wacom, mais lorsqu'ils sont nombreux, les applications en tireront parti.

Qu'en est-il des événements de pointeur ?

Il s'agit de s'assurer que nous disposons d'un événement tactile entièrement étoffé. pour les développeurs qui s'en servent. Regarde comment j'ai esquivé la question... Plus Cependant, si vous souhaitez suivre l'événement PointerEvent de Blink, vous pouvez activer le suivi du problème 471824 et lisez les vidéos de Rick Byers document de suivi.

Voir également