Javascript_html5 튜토리얼 기술의 고급 동작 사용 소개

IE10에 새로 추가된 고급 사용자 입력 인식 지원(예: 클릭 동작을 등록하고 addEventListener 문장을 통해 현재 사용자가 어떤 장치를 클릭하는지, 손가락 클릭인지 마우스 클릭인지 알 수 있음) 또는 스타일러스로 클릭하세요(태블릿 장치에는 모두 스타일러스가 함께 제공됩니다).

<캔버스 id="MyCanvas"></캔버스 >
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, 거짓); 기능 MyBack(e) {                                              >
위 코드는 현재 사용자가 어떤 기기를 클릭했는지 식별할 수 있으며, 콜백 메소드의 e.pointerType을 통해 이를 확인할 수 있습니다. 마우스는 4개, 스타일러스는 3개, 손가락은 2개입니다. 값 1이 어떤 종류의 장치인지에 대해서는 아직 연구가 남아 있습니다.
또 주의할 점은 JavaScript에서 입력 장치 인식을 추가하려는 경우 등록된 메서드 이벤트도 약간 다르다는 것입니다.

addEventListener가 추가한 이벤트는 MSPointerDown입니다. IE10에서는 이러한 다중 기기 인식을 위해 일반 클릭 기능에 영향을 미치지 않는 한 손가락 클릭을 우선시합니다. 하지만 IE10은 사용자의 입력 장치를 인식할 뿐만 아니라 다양한 고급 제스처도 지원합니다 다음은 IE10 고급 제스처 지원 시연입니다

제스처 개체 생성

웹사이트에서 동작을 처리하는 첫 번째 단계는 동작 개체를 인스턴스화하는 것입니다.

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">new</span></p> MSGesture();</span>

다음으로 동작에 대한 대상 요소를 제공합니다. 브라우저는 요소에서 제스처 이벤트를 트리거합니다. 동시에 이 요소는 이벤트의 좌표 공간을 결정할 수도 있습니다.

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

<span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"</span>

, handlerGesture);

마지막으로 제스처 인식 중에 처리할 포인터를 제스처 객체에 알려줍니다.

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

참고: 기본 터치 동작(예: 이동 및 확대/축소)을 수행하지 못하도록 요소를 구성하고 입력을 위한 포인터 이벤트를 제공하려면 –ms-touch-action을 사용해야 한다는 점을 잊지 마세요.

제스처 이벤트 처리

제스처 개체에 유효한 대상이 있고 하나 이상의 포인터가 추가되면 제스처 이벤트가 발생하기 시작합니다. 제스처 이벤트는 정적 제스처(예: 클릭 또는 유지)와 동적 제스처(예: 핀치, 회전, 스와이프)의 두 가지 유형으로 나눌 수 있습니다.

딸깍 하는 소리

가장 기본적인 동작 인식은 클릭입니다. 클릭이 감지되면 제스처 개체의 대상 요소에서 MSGestureTap 이벤트가 시작됩니다. 클릭 이벤트와 달리 탭 동작은 사용자가 터치하거나, ​​마우스 버튼을 누르거나, 움직이지 않고 스타일러스로 터치하는 경우에만 트리거될 수 있습니다. 이는 요소를 클릭하는 사용자와 요소를 드래그하는 사용자를 구별하려는 경우에 유용합니다.

길게 누르기

길게 누르기 동작은 사용자가 한 손가락으로 화면을 터치한 후 잠시 쥐었다가 움직이지 않고 떼는 동작을 말합니다. 길게 누르는 동안 다양한 제스처 상태에 대해 MSGestureHold 이벤트가 여러 번 실행됩니다.

코드 복사

코드는 다음과 같습니다:

element.addEventListener("MSGestureHold", handlerHold);
function handlerHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// 시작은 동작의 시작 신호입니다. 길게 누르기 동작의 경우 이는 손가락을 떼면 동작이 완전히 누르고 있기가 될 정도로 사용자가 충분히 오랫동안 누르고 있음을 의미합니다.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End는 동작의 끝을 나타냅니다.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// 취소는 사용자가 동작을 시작했지만 취소했다는 신호입니다. 보류의 경우 사용자가 손을 떼기 전에 멀리 끌 때 발생합니다. 이 플래그는 동작 인식이 완료되었음을 알리는 종료 플래그와 함께 전송됩니다.
}
}

동적 동작(핀치, 회전, 스와이프 및 드래그)

동적 동작(예: 핀치 또는 회전)은 CSS 2D 전환과 마찬가지로 전환으로 보고됩니다. 동적 제스처는 MSGestureStart, MSGestureChange(제스처가 계속될 때 반복적으로 실행됨), MSGestureEnd의 세 가지 이벤트를 트리거할 수 있습니다. 각 이벤트에는 크기 조정(축소), 회전, 변형 및 속도에 대한 정보가 포함됩니다.

동적 제스처가 전환으로 보고되므로 CSS 2D 전환이 포함된 MSGesture을 사용하여 사진이나 퍼즐과 같은 요소를 쉽게 조작할 수 있습니다. 예를 들어 다음을 통해 요소 크기 조정, 회전 및 끌기를 활성화할 수 있습니다.

코드 복사

코드는 다음과 같습니다. :

targetElement.addEventListener("MSGestureChange", authenticateElement);
function prepareElement(e) {
// 제공된 내장 관성을 비활성화하려면 다음 코드의 주석 처리를 제거하세요. 동적 제스처 인식
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform) // 최신 정보 가져오기 요소의 CSS 변환
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // 변환 원점을 제스처 중심 아래로 이동
.rotate(e . 회전 * 180 / Math.PI) // 회전 적용
.scale(e.scale) // 배율 적용
.translate(e.translationX, e.translationY) // 변환 적용
.translate ( -e.offsetX, -e.offsetY); // 변환 원점을 뒤로 이동
}

크기 조정 및 회전과 같은 동적 제스처를 지원할 수 있습니다. 회전하여 수행 이는 마우스 휠을 사용하는 동안 CTRL 또는 SHIFT 수정자 키를 각각 사용하여 수행됩니다.