view360

Class: SpinViewer

SpinViewer

new eg.view360.SpinViewer(element, options)

SpinViewer.ts, line 37

A module used to displays each image sequentially according to the direction of the user's touch movement (left / right) of the sprite image that is collected by rotating the object.

물체 주위를 회전하여 촬영한 이미지들을 모은 스프라이트 이미지를 사용자의 터치 이동 방향(좌 / 우) 에 따라 각 이미지들을 순차적으로 보여주는 컴포넌트입니다.

  • element
    Type: HTMLElement

    The element to show the image

    이미지를 보여줄 대상 요소

  • options (default: {}) optional
    Type: Object

    The option object

    파라미터 객체

    • imageUrl
      Type: String

      The url of the sprite image

      스프라이트 이미지의 url

    • rowCount (default: 1) optional
      Type: Number

      Number of horizontal frames in the sprite image

      스프라이트 이미지의 가로 프레임 갯수

    • colCount (default: 1) optional
      Type: Number

      Number of vertical frames in the sprite image

      스프라이트 이미지의 세로 프레임 갯수

    • width (default: "auto") optional
      Type: Number | String

      The width of the target element to show the image

      이미지를 보여줄 대상 요소의 너비

    • height (default: "auto") optional
      Type: Number | String

      The height of the target element to show the image

      이미지를 보여줄 대상 요소의 높이

    • autoHeight (default: true) optional
      Type: Boolean

      Whether to automatically set the height of the image area to match the original image's proportion

      원본 이미지 비율에 맞게 이미지 영역의 높이를 자동으로 설정할지 여부

    • colRow (default: [0, 0]) optional
      Type: Array.<Number>

      The column, row coordinates of the first frame of the sprite image (based on 0 index)

      스프라이트 이미지 중 처음 보여줄 프레임의 (column, row) 좌표 (0 index 기반)

    • scale (default: 1) optional
      Type: Number

      Spin scale (The larger the spin, the more).

      Spin 배율 (클 수록 더 많이 움직임)

    • frameIndex optional
      Type: Number

      The frameIndex of the frame to be shown in the sprite image

      스프라이트 이미지 중 보여질 프레임의 frameIndex 값

    • wrapperClass (default: "view360-wrapper") optional
      Type: String

      A class name for the parent element of the image element inside the container element. SpinViewer will use the element that has this class instead of creating one if it exists

      이미지 엘리먼트의 부모 엘리먼트의 클래스 이름. SpinViewer는 해당 클래스를 갖는 엘리먼트가 콘테이너 엘리먼트 내부에 존재할 경우, 새로 생성하는 대신 그 엘리먼트를 사용할 것입니다

    • imageClass (default: "view360-image") optional
      Type: String

      A class name for the image element inside the container element. SpinViewer will use the image element that has this class instead of creating one if it exists

      콘테이너 엘리먼트 내부의 이미지 엘리먼트의 클래스 이름. SpinViewer는 해당 클래스를 갖는 이미지 엘리먼트가 콘테이너 엘리먼트 내부에 존재할 경우, 새로 생성하는 대신 그 엘리먼트를 사용할 것입니다

Example
// Initialize SpinViewer
var el = document.getElementById("product-360");
var viewer = new eg.view360.SpinViewer(el, {
	imageUrl: "/img/bag360.jpg", // required
	rowCount: 24 //required
});

Browser Support

Browser Version
Desktop - Internet Explorer 9+
Desktop - Chrome latest
Desktop - Firefox latest
Desktop - Safari latest
Desktop - Edge latest
iOS 7+
Andorid 2.3+ (except 3.x)

Extends

  • eg.Component

Members

staticeg.view360.SpinViewer.VERSION

Version info string

버전정보 문자열

Example
eg.view360.SpinViewer.VERSION;  // ex) 3.0.1

Methods

getAngle(){Number}

SpinViewer.ts, line 218

Returns current angles

현재 각도를 반환한다.

Returns:
Type Description
Number
Current angle

현재 각도

getScale(){Number}

SpinViewer.ts, line 174

Get spin scale

scale 값을 반환한다.

Returns:
Type Description
Number
Rotation multiples at spin, the larger the rotation

Spin 시 회전 배수값, 커질 수록 더 많이 회전
Example
viewer.getScale();// It returns number

setScale(scale){Object}

SpinViewer.ts, line 153

Set spin scale

scale 을 조정할 수 있는 함수

  • scale
    Type: Number

    Rotation multiples at spin, the larger the rotation

    Spin 시 회전 배수값, 커질 수록 더 많이 회전

Returns:
Type Description
Object
Instance of SpinViewer

SpinViewer 인스턴스
Example
viewer.setScale(2);// It moves twice as much.

spinBy(angle, param){Object}

SpinViewer.ts, line 190

It gives the effect of rotating for a certain duration by the specified angle based on the current rotation angle.

현재 회전 각도를 기준으로 지정된 각도(angle)만큼 일정 시간동안(duration) 회전하는 효과를 준다.

  • angle (default: 0) optional
    Type: Number

    angle

    상대적 회전 각도

  • param (default: {duration: 0}) optional
    Type: Object

    The parameter object

    파라미터 객체

    • duration (default: 0) optional
      Type: Number

      duration

      회전할 시간 - 밀리세컨드 단위

Returns:
Type Description
Object
Instance of SpinViewer

SpinViewer 인스턴스
Example
viewer.spinBy(720, {duration: 500});

spinTo(angle, param){Object}

SpinViewer.ts, line 207

It gives the effect of rotating for a certain duration (duration) by the specified angle (angle).

지정된 각도(angle)만큼 일정 시간동안(duration) 회전하는 효과를 준다.

  • angle (default: 0) optional
    Type: Number

    angle

    회전 각도

  • param (default: {duration: 0}) optional
    Type: Object

    The parameter object

    파라미터 객체

    • duration (default: 0) optional
      Type: Number

      duration

      회전할 시간 - 밀리세컨드 단위

Returns:
Type Description
Object
Instance of SpinViewer

SpinViewer 인스턴스
Example
viewer.spinTo(30, {duration:100});
comments powered by Disqus