제스처 이벤트를 통한 화면 이동, 확대/축소 및 탭 이상의 터치 경험

Microsoft는 여러분의 의견을 바탕으로, Windows 8 Release Preview의 IE10에서 제스처 이벤트를 사용하여 사이트에서 고급 터치 경험을 구현할 수 있는 방법을 개선했습니다. 이전 글에서는 사이트가 터치 중심적인지 확인하기 위해 웹 개발자가 수행해야 하는 첫 번째 단계 및 하드웨어에 관계없이 포인터 이벤트를 사용하여 여러 입력 장치에서 원활하게 작동하는 새로운 경험을 구현하는 방법에 대해 알아보았습니다. 이 글에서는 IE10의 제스처 이벤트에 대해 살펴보겠습니다. 제스처 이벤트의 예로는 아래 표시된 Browser Surface 테스트 데모가 있습니다.

사용자는 Browser Surface 데모를 사용하여 사진을 끌고, 손가락을 모으고, 회전할 수 있습니다.

Windows 8 Release Preview의 IE10에는 JavaScript로 작성된 제스처 인식 개체가 포함되어 있습니다. 사이트에서 제스처 개체를 만들고, 처리할 포인터(마우스, 펜 또는 터치 접촉)를 확인하고, 원하는 모든 요소에서 제스처 이벤트를 실행할 수 있습니다. 그런 다음 브라우저는 수행 중인 제스처를 계산하여 이벤트를 통해 페이지에 알립니다. 이를 통해 개발자는 아직 다른 어떤 브라우저에서도 경험할 수 없는 제스처 경험을 구현할 수 있습니다. 여기에는 여러 개의 동시 제스처(예: 손으로 두 개의 퍼즐 조각 회전)가 포함됩니다.

그럼 이제 이 작업이 코드에서 작동하는 방식에 대해 알아보겠습니다.

제스처 개체 만들기

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

var myGesture = new MSGesture();

그런 다음, 제스처에 대상 요소를 제공합니다. 이 요소는 브라우저에서 제스처 이벤트를 발생시키는 역할을 합니다. 또한 이벤트에 대한 좌표 공간을 결정하는 요소이기도 합니다.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

끝으로, 제스처 개체에 제스처 인식에서 처리할 포인터를 알려 줍니다.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

참고: –ms-touch-action을 사용하여 화면 이동 및 확대/축소와 같은 기본 터치 동작을 수행하지 않도록 요소를 구성해야 합니다(대신 입력에 대한 포인터 이벤트를 제공해야 함).

제스처 이벤트 처리

제스처 개체에 유효한 대상이 지정되고 하나 이상의 포인터가 추가되면 제스처 이벤트가 발생하기 시작합니다. 제스처 이벤트는 정적 제스처(예: 탭 또는 누르고 있기)와 동적 제스처(예: 손가락 모으기, 회전 또는 살짝 밀기)의 두 가지 형태로 제공됩니다.

탭

가장 기본적인 제스처 인식은 탭입니다. 탭이 감지되면 제스처 개체의 대상 요소에서 MSGestureTap 이벤트가 발생합니다. 클릭 이벤트와 달리, 탭 제스처는 사용자가 이동하지 않고 위/아래로 터치하거나 마우스 단추를 터치하거나 펜을 터치한 경우에만 발생합니다. 이는 사용자가 요소를 탭한 경우와 요소를 끈 경우를 구별하려는 경우에 유용합니다.

길게 누르기

길게 누르기 제스처는 사용자가 손가락 하나로 터치한 상태를 잠시 유지한 후 움직이지 않고 손가락을 떼는 경우에 발생합니다. 길게 누르기 조작 중에는 제스처의 여러 상태에 대해 MSGestureHold 이벤트가 두 번 이상 발생합니다.

element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {

if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {

// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.

}

if (evt.detail & evt.MSGESTURE_FLAG_END) {

// End signals the end of the gesture.

}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.

}

}

동적 제스처(손가락 모으기, 회전, 살짝 밀기 및 끌기)

손가락 모으기 또는 회전과 같은 동적 제스처는 CSS 2D 변환과 유사한 변환 형식으로 보고됩니다. 동적 제스처에 대해 발생하는 이벤트는 MSGestureStart, MSGestureChange(제스처가 지속됨에 따라 반복적으로 발생) 및 MSGestureEnd의 세 가지가 있습니다. 각 이벤트는 크기 조정(손가락 모으기), 회전, 변환 및 속도에 대한 정보를 포함합니다.

동적 제스처는 변환을 보고하기 때문에 CSS 2D 변환에서 MSGesture를 사용하여 사진이나 퍼즐 조각과 같은 요소를 쉽게 조작할 수 있습니다. 예를 들어 다음과 같이 요소를 크기 조정, 회전 및 끌 수 있습니다.

targetElement.addEventListener("MSGestureChange", manipulateElement);

function manipulateElement(e) {

// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)

// return;

 

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element

e.target.style.transform = m

.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture

.rotate(e.rotation * 180 / Math.PI) // Apply Rotation

.scale(e.scale) // Apply Scale

.translate(e.translationX, e.translationY) // Apply Translation

.translate(-e.offsetX, -e.offsetY); // Move the transform origin back

}

크기 조정 및 회전과 같은 동적 제스처는 Ctrl 또는 Shift 보조 키가 있는 마우스 휠을 회전하는 방식으로 마우스에서 지원됩니다.

요약

IE10의 제스처 이벤트를 사용하여 현재 다른 어떤 브라우저에서도 경험할 수 없는 터치 경험을 구현할 수 있습니다. MSGesture 개체 및 MSGesture 이벤트에 대한 자세한 설명서는 MSDN을 참조하세요.

제스처 이벤트를 사용하여 사이트에 화면 이동, 확대/축소 및 탭 이외의 추가 기능을 적용해 보시기 바랍니다.

- Internet Explorer 프로그램 관리자, Jacob Rossi