[javascript] Universal Viewer를 사용한 도면 및 CAD 파일 뷰어 기능
이번에는 Universal Viewer 라이브러리를 사용하여 도면 및 CAD 파일을 뷰어로 사용하는 방법을 알아보겠습니다. Universal Viewer는 웹 기반의 다양한 형식의 파일을 표시하고 탐색할 수 있는 강력한 도구입니다.
Universal Viewer란?
Universal Viewer는 웹 기반의 오픈 소스 라이브러리로, 다양한 형식의 파일을 표시하고 탐색하는 기능을 제공합니다. 이 라이브러리는 JavaScript와 HTML5를 기반으로 작동하며, SVG, PDF, CAD, 이미지 등 다양한 형식의 파일을 지원합니다. 또한, 확대, 축소, 회전, 숨김 등 다양한 조작 기능도 제공합니다.
도면 및 CAD 파일 뷰어 기능 구현하기
- 먼저, Universal Viewer 라이브러리를 다운로드하여 프로젝트에 추가합니다.
- HTML 파일에서 Universal Viewer 라이브러리를 포함시킬 수 있도록 스크립트 태그를 추가합니다.
<script src="universal-viewer.min.js"></script>
- 도면이나 CAD 파일을 표시할 영역을 생성합니다. 예를 들어,
<div>태그를 사용하여 특정 영역을 지정합니다.
<div id="myViewer"></div>
- JavaScript 코드를 사용하여 Universal Viewer를 초기화하고 파일을 로드합니다.
var viewer = new UniversalViewer({
element: document.getElementById("myViewer"),
modules: ["core", "cad", "pdf", "image"], // 필요한 모듈을 지정합니다.
sequence: [
{type: "auto", url: "path/to/myfile.dwg"}, // 도면 파일의 경로를 지정합니다.
{type: "auto", url: "path/to/myfile.pdf"}, // PDF 파일의 경로를 지정합니다.
{type: "auto", url: "path/to/myfile.jpg"}, // 이미지 파일의 경로를 지정합니다.
],
});
- 파일이 로드되면 Universal Viewer를 사용하여 도면이나 CAD 파일을 탐색하고 조작할 수 있습니다. 확대, 축소, 회전 등의 조작 기능이 자동으로 제공됩니다.
결론
Universal Viewer를 사용하면 웹 기반의 도면 및 CAD 파일을 쉽게 탐색하고 뷰어로 사용할 수 있습니다. 이 라이브러리는 다양한 형식의 파일을 지원하며, 강력한 조작 기능을 제공합니다. 프로젝트에 적용하여 사용자들이 도면이나 CAD 파일을 효과적으로 확인할 수 있도록 도움을 줄 수 있습니다.