view360

Class: SpriteImage

SpriteImage

new eg.view360.SpriteImage(element, options)

SpriteImage.ts, line 115

A module that displays a single or continuous image of any one of the "sprite images". SpinViewer internally uses SpriteImage to show each frame of the sprite image.

스프라이트 이미지 중 임의의 한 프레임을 단발성 혹은 연속적으로 보여주는 컴포넌트입니다. SpinViewer 는 내부적으로 SpriteImage 를 사용하여 스프라이트 이미지의 각 프레임을 보여줍니다.

  • 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 기반)

    • frameIndex (default: 0) optional
      Type: Number

      frameIndex specifies the index of the frame to be displayed in the "Sprite image". The frameIndex order is zero-based and indexed in Z form (left-to-right, top-to-bottom, and newline again from left to right).
      - colRow is equivalent to frameIndex. However, if colRow is specified at the same time, colRow takes precedence.

      스프라이트 이미지 중에서 보여질 프레임의 인덱스를 지정합니다. frameIndex 순서는 0부터 시작하며 Z 형태(왼쪽에서 오른쪽, 위에서 아래, 개행 시 다시 왼쪽 부터)로 인덱싱합니다.
      - colRow 는 frameIndex 와 동일한 기능을 합니다. 단, colRow 가 동시에 지정된 경우 colRow 가 우선합니다.

    • scale (default: 1) optional
      Type: Number

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

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

Example
// Initialize SpriteImage


var el = document.getElementById("image-div");

var sprites = new eg.view360.SpriteImage(el, {

imageUrl: "/img/bag360.jpg", // required

rowCount: 24

});

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

Methods

gelColRow(){Array.<Number>}

SpriteImage.ts, line 283

Returns the col and row values of the frame to be shown in the sprite image.

스프라이트 이미지 중 보여지는 프레임의 col, row 값을환반환

Returns:
Type Description
Array.<Number>
Array containing col, row

col, row 정보를 담는 배열
Example
var colRow = sprites.getlColRow();

// colRow = [1, 2] - index of col is 1, index of row is 2

getFrameIndex(){Number}

SpriteImage.ts, line 244

Returns the frameIndex of the frame to be shown in the sprite image.

스프라이트 이미지 중 보여지는 프레임의 index 값을 반환

Returns:
Type Description
Number
frame index

frame 인덱스
Example
var frameIndex = sprites.getFrameIndex(); // eg. frameIndex = 1

play(param)

SpriteImage.ts, line 316

Switches frames sequentially in the 'interval' starting from the currently displayed frame and plays all frames by 'playCount'.

현재 보여지고 있는 프레임을 시작으로 'interval' 간격으로 순차적으로 프레임을 전환하며 모든 프레임을 'playCount' 만큼 재생한다.

  • param (default: {interval: 1000 / this._totalCount, playCount: 0}) optional
    Type: Object

    The parameter object

    파라미터 객체

    • interval (default: 1000 / totalFrameCount) optional
      Type: Number

      Interframe Interval - in milliseconds

      프레임간 간격 - 밀리세컨드 단위

    • playCount (default: 0) optional
      Type: Number

      PlayCount = 1 in which all frames are reproduced once, and playCount = n in which all frames are repeated n times. playCount = 0 in which all frames are repeated infinitely

      모든 프레임을 1회씩 재생한 것이 playCount = 1, 모든 프레임을 n 회 재상한 것이 playCount = n 이 된다. 0 dms 무한반복

Example
viewer.play({angle: 16, playCount: 1});

setColRow(col, row)

SpriteImage.ts, line 259

Specifies the col and row values of the frame to be shown in the sprite image.

스프라이트 이미지 중 보여질 프레임의 col, row 값을 지정

  • col
    Type: Number

    Column number of a frame

    프레임의 행값

  • row
    Type: Number

    Row number of a frame

    프레임의 열값

Example
sprites.setlColRow(1, 2); // col = 1, row = 2

setFrameIndex(frameIndex)

SpriteImage.ts, line 228

Specifies the frameIndex of the frame to be shown in the sprite image.

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

  • frameIndex
    Type: Number

    frame index of a frame

    프레임의 인덱스

Example
sprites.setFrameIndex(0, 1);// col = 0, row = 1

stop()

SpriteImage.ts, line 299

Stop playing

play 되고 있던 프레임 재생을 중지합니다.

Example
viewer.stop();
comments powered by Disqus