Chrome의 Touch API에 비교적 작은 변경사항이 Chrome 39에 적용되어 TouchEvent 객체에 작동하는 버전의 webkitRotationAngle 속성이 도입되었습니다. 이제 Chrome 45 (2015년 7월 베타)에서는 접두사가 rotationAngle로 지정되지 않아 TouchEvent 사양 및 Firefox와 더 유사하게 구현됩니다.
rotationAngle는 오래 전부터 사용되어 왔지만, 특히 휴대기기에서 터치 동작을 더 흥미롭게 사용할 수 있게 해 주므로 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을 사용하는 경우 다음과 같이 표시됩니다.
이미지 제공: 릭 바이어스
기기가 터치의 회전 각도를 파악할 수 없는 경우 rotationAngle는 0이고 radiusX 및 radiusY 값은 같지만 현재 터치 표면 영역에 따라 다를 수 있습니다.
굳이 티저 영상까지 보여줘야 하냐고요?
좋은 질문입니다. 웹의 많은 기능과 마찬가지로 이 기능은 추가적인 환경입니다.
터치 이벤트는 지원되는 경우 작동하며, 반지름과 회전 값을 사용할 수 있는 경우 애플리케이션을 개선하여 사용자에게 더 나은 환경을 제공할 수 있습니다. 모든 사용자에게 Wacom 태블릿이 있는 것은 아니지만 Wacom 태블릿이 있으면 많은 페인팅 애플리케이션에서 이를 활용합니다.
포인터 이벤트는 어떻게 되나요?
이는 터치 이벤트 API를 사용하는 개발자를 위해 완전한 터치 이벤트 API를 제공하기 위함입니다. 질문을 피하는 방법을 확인해 보세요. 진지하게 말씀드리자면 Blink의 PointerEvent 구현을 따라가고 싶다면 문제 471824에 별표표시하고 릭 바이어스 추적 문서를 읽어보세요.