마우스 제스처 컨트롤은 사용자가 마우스 움직임으로 다양한 작업을 수행할 수 있게 해주는 기능입니다. Universal Viewer는 자바스크립트 라이브러리로, 그림이나 이미지를 보여줄 때 사용되는 유명한 뷰어 도구입니다. 이 뷰어를 사용하여 마우스 제스처 컨트롤 기능을 구현해 보겠습니다.

Universal Viewer 설치

먼저 Universal Viewer를 사용하기 위해 필요한 파일을 다운로드하고, HTML 문서에 추가해야 합니다. 아래의 코드를 사용하여 Universal Viewer의 스타일 시트 파일과 자바스크립트 파일을 다운로드합니다.

<link rel="stylesheet" href="universalviewer.min.css">
<script src="universalviewer.min.js"></script>

컨트롤 기능 추가

Universal Viewer를 컨트롤하기 위해 몇 가지 기능을 추가할 필요가 있습니다.

줌 기능

var viewer = new UV.Viewer({
  ...
  modules: [
    'uv-seadragon-extension'
  ]
});

위의 코드에서 modules 배열에 uv-seadragon-extension 모듈을 추가하면 줌 기능을 사용할 수 있게 됩니다.

마우스 제스처 기능 추가

var viewerOptions = {
  ...
  gestures: {
    zoom: true,
    pan: true,
    rotate: true,
    fullscreen: true
  }
};

var viewer = new UV.Viewer(viewerOptions);

위의 코드에서 gestures 객체를 사용하여 마우스 제스처 컨트롤 기능을 추가할 수 있습니다. zoom, pan, rotate, fullscreen 등의 속성을 true로 설정하면 해당 기능이 활성화됩니다.

마무리

이제 Universal Viewer를 사용하여 마우스 제스처 컨트롤 기능을 추가하는 방법에 대해 알아보았습니다. Universal Viewer는 다양한 기능과 확장성을 제공하기 때문에 이를 활용하여 사용자 친화적인 뷰어를 만들 수 있습니다. 더 많은 정보와 사용 예제는 Universal Viewer의 공식 문서를 참고하시기 바랍니다.

참고자료

• Universal Viewer 공식 사이트
• Universal Viewer GitHub 저장소