rotationAngle 및 touchRadius 사용

Chrome 39에서는 Chrome의 Touch API가 비교적 약간 변경되어 TouchEvent 객체에 작동하는 webkitRotationAngle 속성 버전이 도입되었습니다. 이제 Chrome 45 (2015년 7월 베타)에서는 rotationAngle라는 접두사가 붙지 않으므로 TouchEvent 사양 및 Firefox를 사용하여 구현 방식이 더욱 원활하게 이루어집니다.

이 기능은 한동안 사용되었지만 rotationAngle이 무엇인지 설명하는 것이 좋습니다. 특히 휴대기기에서 터치 동작의 더 흥미로운 사용이 가능해지기 때문입니다.

기술적으로 회전 각도는 Touch.radiusXTouch.radiusY로 정의되는 접촉 영역 타원의 도수 (0~90)입니다. 멋지죠? (Android용 Chrome에서는 radiusXradiusY 값을 64px로 고정하지 않고 화면의 연락처 크기에 따라 변경한다는 사실만 있었습니다.)

그것은 실제로 무엇을 의미할까요?

화면에 사용자 손가락의 크기, 모양, 방향을 정확하게 나타내는 방법으로 생각하세요. 사용자는 항상 손가락 끝으로 화면을 탭하는 것이 아니라 경찰에 지문을 줄 때처럼 화면을 자주 누릅니다. rotationAngle가 없으면 터치 동작의 너비와 높이를 간단하게 확인할 수 있습니다. rotationAngle를 사용하면 90도 회전이 가능합니다 (0도 수직, 90도 수평). 왜 90도일까? 90도만 필요한 이유는 이 각도를 지나치면 radiusXradiusY이 수용하도록 변경되기 때문입니다.

또 다른 멋진 점은 화면에 손가락이 닿는 강도에 따라 손가락의 접촉 영역이 변한다는 점입니다. force를 직접 대체하지는 않지만 화면의 라이트 브러시는 세게 누르는 것보다 표면적이 작기 때문에 구별할 수 있습니다.

어떻게 사용할 수 있나요?

먼저 이것을 감지할 수 있는 기기가 필요합니다 Nexus 10은 문제없이 작동합니다. Rick Byers 페인트의 예를 직접 살펴보면 좋은 예를 들 수 있습니다. 캔버스 없이 사용할 수 있는 방법이 나와 있지만 아무리 강조해도 지나치지 마세요

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;

실제로 어디에 사용하나요?

이렇게 하면 사용자에게 즉각적으로 도움이 되는 몇 가지 확실한 위치는 다음과 같습니다.

  • 예를 들어 회화 및 이미지 조작 웹 앱에서는 이 정보를 사용하여 캔버스에 적용되는 획이나 효과를 변경할 수 있습니다. 터치 반경을 사용하여 브러시의 크기를 변경할 수 있으며 rotationAngle에서 캔버스에서 브러시의 접촉 각도를 다양하게 조합할 수 있습니다.
  • 향상된 동작 인식: rotationAngle을 이해하면 한 손가락 동작을 만들어 물체를 회전할 수 있습니다.

모든 기기에서 지원하나요?

아니요. 아직은 많이 흔한 일은 아닙니다. Nexus 10의 경우 다음과 같이 표시됩니다.

터치 각도 회전 스크린샷

이미지 출처는 Rick Byers입니다.

기기가 터치의 회전 각도를 이해할 수 없는 경우 rotationAngle는 0이 되고 radiusXradiusY 값은 동일합니다 (현재 터치 표면 영역에 따라 다를 수 있음).

신경 쓰지 않아도 되는 이유가 무엇인가요?

좋은 질문입니다. 웹의 많은 기능과 마찬가지로, 이것은 부가적인 경험입니다.
터치 이벤트는 지원되는 경우 작동하며, 반경 및 회전 값을 사용할 수 있는 경우 애플리케이션을 개선하여 사용자에게 더 풍부한 경험을 제공할 수 있습니다. 모든 사용자가 Wacom 태블릿을 사용하지는 않지만, 많은 페인팅 애플리케이션이 이를 활용합니다.

포인터 이벤트는 어떤가요?

이는 터치 이벤트 API를 사용하는 개발자를 위해 완성도 높은 터치 이벤트 API를 제공하기 위한 노력에 불과합니다. 제가 어떻게 질문을 피했는지 보세요. 더 진지하게는 Blink의 PointerEvent 구현을 따르고 싶다면 문제 471824에 별표를 표시하고 Rick Byers의 추적 문서를 읽어보세요.

더보기