Chrome에서 Touch API에 상대적으로 작은 변화가 일어났습니다.
Chrome 39
에 webkitRotationAngle 속성의 작동 버전을 도입했습니다.
TouchEvent 객체 이제 Chrome 45 (2015년 7월 베타)에서는 rotationAngle가 접두어로 붙지 않습니다.
Google의 구현 방식을
TouchEvent
사양 및 Firefox
오래전부터 존재했지만
rotationAngle는 터치를 더욱 흥미롭게 사용하기 때문입니다.
동작입니다.
기술적으로 회전 각도는
다음으로 정의된 접촉 영역 타원
Touch.radiusX
및
Touch.radiusY.
으, 멋지죠? (참고로, Chrome OS가
Android는 radiusX 및 radiusY 값을 64px로 잠그지 않지만 대신
화면의 접촉 크기에 따라 다를 수 있음).
이것은 실제로 무엇을 의미할까요?
이것을 입체의 크기, 모양, 방향을 정확하게 나타내는 방법으로 생각하세요.
도움이 될 수 있습니다 사용자가 항상 촉으로 화면을 탭하지는 않음
손가락 끝의 움직임이 적을 때처럼 화면을 너무 자주 누르는 동작
경찰이 지문을 찍었습니다. rotationAngle가 없으면 다음과 같은 결과를 얻을 수 있습니다.
터치 동작의 너비와 높이입니다. rotationAngle를 사용하면
90도 회전합니다 (0도 수직, 90도 수평). 왜만
90도요? 90도만 있으면 됩니다. 90도만 있으면 됩니다.
radiusX 및 radiusY는 이에 맞게 변경됩니다.
또 다른 멋진 점은 사용자 손가락의 접촉 영역이
손가락의 압력이 화면에 가해지는 압력이 다르기 때문입니다. 이것은
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;
실제로 어디에 사용할 수 있을까요?
이것이 바로 AI 모델의 프로토타입에 사용자:
- 예를 들어 회화 및 이미지 조작 웹 앱에서는 캔버스에 적용된 획이나 효과를 변경하기 위한 정보 다음과 같은 방법을 사용할 수 있습니다. 터치 반경을 사용하여 브러시의 크기를 변경하고 회전 각도를 설정하여 캔버스에서 브러시가 접촉하는 각도를 변화시킵니다.
- 향상된 동작 인식: 회전 각도를 이해하면 한 손가락 동작을 통해 객체를 회전할 수 있습니다.
모든 기기에서 이 기능을 지원하나요?
아니요. 아직은 그렇게 흔하지 않습니다. Nexus 10을 사용하는 경우 다음과 같이 표시됩니다.
이미지 제공자: Rick Byers
기기가 터치의 회전 각도를 이해하지 못하는 경우
rotationAngle가 0이 되고 radiusX 및 radiusY 값이
같아야 합니다 (단, 현재 터치 스크린 영역에 따라 달라질 수 있음).
왜 성가신가요?
좋은 질문입니다. 웹의 여러 기능과 마찬가지로 이 또한 새로운 경험을 제공합니다.
터치 이벤트는 지원되는 경우, 그리고 반경과 회전 값이
애플리케이션을 개선하여 사용자가 더 많은 작업을 할 수 있도록
경험해 볼 수 있습니다 모든 사용자가 Wacom 태블릿을 사용하는 것은 아니지만, 페인트칠을 많이 하는 경우
애플리케이션은 이를 활용할 수 있습니다
포인터 이벤트는 어떤가요?
이것은 정말로 우리가 완전히 다듬은 터치 이벤트를 이 API를 사용하는 개발자를 위한 API입니다. 내가 어떻게 질문을 조금 틀렸는지 봐... 더보기 Blink의 PointerEvent를 따라가는 데 문제 471824에 별표표시하고 Rick Byers의 추적 문서를 참조하세요.