Chrome의 Touch API에 대한 비교적 작은 변경사항이 Chrome 39에 적용되어 TouchEvent 객체에 webkitRotationAngle 속성의 작동 버전이 도입되었습니다. 이제 Chrome 45 (2015년 7월 베타)에서는 rotationAngle로 접두사가 지정되지 않아 구현이 TouchEvent 사양 및 Firefox와 더 일치합니다.
rotationAngle는 출시된 지 오래되었지만, 특히 휴대기기에서 터치 동작을 더 흥미롭게 사용할 수 있으므로 설명할 가치가 있습니다.
기술적으로 회전 각도는 Touch.radiusX 및 Touch.radiusY로 정의된 접촉 영역 타원의 각도 (0~90도)입니다.
멋지죠? (Android의 Chrome은 radiusX 및 radiusY 값을 64px로 고정하지 않고 화면의 접촉 크기에 따라 변경한다는 사실을 알게 되었습니다.)
이것이 의미하는 바는 무엇일까요?
화면에서 사용자의 손가락 크기, 모양, 방향을 정확하게 나타내는 방법이라고 생각하면 됩니다. 사용자는 항상 손가락 끝으로 화면을 탭하는 것이 아니라 경찰에 지문을 제공하는 것처럼 화면을 누르는 경우가 많습니다. rotationAngle가 없으면 터치 동작의 너비와 높이만 알 수 있습니다. rotationAngle를 사용하면 90도 회전할 수 있습니다 (0은 세로, 90은 가로). 왜 90도만
가능할까요? 90도만 필요한 이유는 해당 각도를 지나면 radiusX 및 radiusY가 이에 맞게 변경되기 때문입니다.
이 기능의 또 다른 장점은 사용자가 화면에 가하는 손가락의 압력 정도에 따라
손가락의 접촉 영역이 달라진다는 것입니다. force를 직접 대체하지는 않지만, 화면을 가볍게 터치하면 더 세게 누를 때보다 표면적이 작아지므로 가볍게 터치하는 것을 구분할 수 있습니다.
어떻게 사용하나요?
먼저 이를 감지할 수 있는 기기가 필요합니다. Nexus 10은 정상적으로 작동합니다. 릭 바이어스의 페인트 예시를 직접 살펴보는 것이 좋습니다. 하지만 캔버스 없이도 사용할 수 있는 방법이 있습니다.
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이 되고 radiusX 및 radiusY 값은 같아집니다 (단, 현재 터치 표면 영역에 따라 달라질 수 있음).
대체 왜…
좋은 질문입니다. 웹의 많은 기능과 마찬가지로 이 기능은 추가적인 경험입니다.
터치 이벤트는 지원되는 경우 작동하며, 반지름 및 회전 값을 사용할 수 있는 경우 애플리케이션을 개선하여 사용자에게 더 강력한 환경을 제공할 수 있습니다. 모든 사용자가 Wacom 태블릿을 가지고 있는 것은 아니지만,
많은 페인팅 애플리케이션이 이를 활용합니다.
포인터 이벤트는 어떤가요?
이는 터치 이벤트 API를 사용하는 개발자를 위해 완전한 터치 이벤트 API를 제공하기 위한 것입니다. 질문을 살짝 피한 거 보이시죠? 하지만 더 심각한 것은, Blink의 PointerEvent 구현을 따르는 데 관심이 있다면 Issue 471824에 별표표시를 하고 Rick Byers의 추적 문서를 읽을 수 있다는 점입니다.