본문으로 건너뛰기

시작하기 (Svelte)

가장 기본적인 렌더링 코드​

<script>
import View360, { EquirectProjection } from "@egjs/svelte-view360";
import "@egjs/svelte-view360/css/view360.min.css";

const projection = new EquirectProjection({
  src: "/egjs-view360/pano/equirect/veste.jpg"
});
</script>

<View360 class="is-16by9" projection={projection} />

스타일​

@egjs/svelte-view360에서 직접 CSS 파일을 임포트하실 수 있습니다.

import "@egjs/svelte-view360/css/view360.min.css";

프로퍼티와 메소드​

프로퍼티와 메소드 문서를 확인해주세요.

이벤트​

Events에 정의되어있는 모든 이벤트들은 다른 Svelte 이벤트들과 동일한 방식으로 사용 가능합니다.
하지만, 이벤트가 CustomEvent 형식으로 전달되므로, 실제 이벤트 프로퍼티들은 detail 내에 저장되어 있습니다.
예를 들어, viewChange 이벤트에 대한 핸들러는 다음과 같이 등록 가능합니다.

<script lang="ts">
import View360, { ViewChangeEvent } from "../src";

function viewChange(evt: CustomEvent<ViewChangeEvent>) {
  console.log(evt.detail); // = ViewChangeEvent
}
</script>

<View360 on:viewChange={viewChange} />

추가 Props​

canvasClass: string = ""​

class을 사용하면, .view360-container 엘리먼트에 클래스를 추가하게 됩니다.
대신에, canvasClass를 사용하면 .view360-canvas 엘리먼트에 클래스를 추가하실 수 있습니다.

예를 들어, 다음 코드는:

<View360 class="CLASS_A" canvasClass="CLASS_B" />

다음과 같이 렌더링됩니다:

<div class="view360-container CLASS_A">
  <canvas class="view360-canvas CLASS_B" />
</div>