Universal Viewer는 웹 기반의 이미지 뷰어로, 다양한 멀티 터치 기능을 제공합니다. 사용자는 이미지를 확대, 축소, 회전 등의 동작을 손가락으로 터치하여 할 수 있습니다. 이 글에서는 Universal Viewer를 통해 멀티 터치 기능을 구현하는 방법에 대해 알아보겠습니다.

Universal Viewer 설치

Universal Viewer를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. npm을 통해 설치할 수 있습니다.

npm install universal-viewer

Universal Viewer 초기화

Universal Viewer를 초기화하기 위해서는 Container 엘리먼트와 이미지 URL을 전달해야 합니다. 이때, 컨테이너 엘리먼트는 해당 뷰어가 표시될 HTML 엘리먼트를 의미합니다.

const container = document.getElementById('viewer-container');
const imageUri = 'https://example.com/image.jpg';

new UniversalViewer(container, imageUri);

멀티 터치 기능 활성화

이제 Universal Viewer를 초기화한 후에 멀티 터치 기능을 활성화해야 합니다. Universal Viewer는 Hammer.js 라이브러리를 사용하여 멀티 터치 이벤트를 처리합니다. 따라서, Hammer.js 라이브러리를 프로젝트에 추가해야 합니다.

npm install hammerjs

그리고 Universal Viewer 초기화 코드 아래에 아래와 같은 코드를 추가합니다.

const viewer = new UniversalViewer(container, imageUri);
const hammerManager = new Hammer.Manager(viewer.canvas);
hammerManager.add(new Hammer.Pinch());
hammerManager.add(new Hammer.Rotate());

이렇게 하면 사용자가 이미지를 멀티 터치하여 확대, 축소, 회전 등의 동작을 할 수 있습니다.

추가적인 설정

Universal Viewer는 다양한 사용자 정의 옵션을 제공합니다. 사용자는 이를 사용하여 뷰어의 동작을 변경할 수 있습니다. 자세한 내용은 Universal Viewer의 공식 문서를 참조하시기 바랍니다.

참고 자료

• Universal Viewer 공식 문서: https://universalviewer.io/docs/
• Hammer.js 공식 문서: https://hammerjs.github.io/