본문으로 건너뛰기
Version: 4.7.1

Camera

class Camera

뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트

Constructor

new Camera(flicking, )
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
flickingFlicking
Partial<CameraOptions>✔️{}

Properties

element

readonly

카메라 엘리먼트(.flicking-camera)

Type: HTMLElement

children

readonly

카메라 엘리먼트(.flicking-camera)의 자식 엘리먼트 배열

Type: Array<HTMLElement>

position

readonly

Camera의 현재 좌표

Type: number

alignPosition

readonly

패널의 정렬 기준 위치. 뷰포트 내에서 PanelalignPosition이 위치해야 하는 곳입니다

Type: number

offset

readonly

Camera의 좌표 오프셋. renderOnlyVisible 옵션을 위해 사용됩니다.

Type: number

Default: 0

circularEnabled

readonly

circular 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
circular 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.

Type: boolean

Default: false

mode

readonly

A current camera mode

Type: CameraMode

range

readonly

Camera의 position이 도달 가능한 범위

Type: object

PROPERTYTYPEDESCRIPTION
minnumber최소 위치
maxnumber최대 위치

rangeDiff

readonly

Camera가 도달 가능한 최소/최대 좌표의 차이

Type: number

visiblePanels

readonly

현재 보이는 패널들의 배열

Type: Array<Panel>

visibleRange

readonly

현재 위치에서 보이는 범위

Type: object

PROPERTYTYPEDESCRIPTION
minnumber최소 위치
minnumber최대 위치

anchorPoints

readonly

카메라가 도달 가능한 AnchorPoint의 목록

Type: Array<AnchorPoint>

controlParams

readonly

AxesController를 업데이트하기 위한 현재 Camera 패러미터들

Type: ControlParams

atEdge

readonly

현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다

Type: boolean

size

readonly

뷰포트 크기를 반환합니다

Type: number

progress

readonly

첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
범위는 0부터 마지막 패널의 인덱스까지입니다

Type: number

align

alignPosition이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값

Type: ALIGN | string | number

Methods

init

Camera를 초기화합니다

Returns: this

Throws: FlickingError

VAL_MUST_NOT_NULL 뷰포트 엘리먼트 내부에 카메라 엘리먼트(.flicking-camera)가 존재하지 않을 경우

destroy

Camera를 초기 상태로 되돌립니다

Returns: void

lookAt

해당 좌표로 이동하고, CSS transform을 적용합니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber움직일 위치

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우

getPrevAnchor

주어진 AnchorPoint의 이전 AnchorPoint를 반환합니다
존재하지 않을 경우 null을 반환합니다

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
anchorAnchorPoint기준 AnchorPoint

getNextAnchor

주어진 AnchorPoint의 다음 AnchorPoint를 반환합니다
존재하지 않을 경우 null을 반환합니다

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
anchorAnchorPoint기준 AnchorPoint

getProgressInPanel

현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanel

findAnchorIncludePosition

주어진 좌표를 포함하는 AnchorPoint를 반환합니다
주어진 좌표를 포함하는 AnchorPoint가 없을 경우 null을 반환합니다

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumber확인할 좌표

findNearestAnchor

해당 좌표에서 가장 가까운 AnchorPoint를 반환합니다
AnchorPoint가 하나도 없을 경우 null을 반환합니다

Returns: AnchorPoint | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumber확인할 좌표

findActiveAnchor

현재 Flicking#currentPanel에 해당하는 AnchorPoint를 반환합니다

Returns: AnchorPoint | null

clampToReachablePosition

주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다

Returns: number

  • 범위 제한된 좌표
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
positionnumber범위를 제한할 좌표

canReach

해당 Panel이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다

Returns: boolean

  • 도달 가능한 범위 내에 해당 패널이 존재하는지 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanel확인할 Panel의 인스턴스

canSee

현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다

Returns: boolean

  • 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelPanel확인할 Panel의 인스턴스

updateRange

Camera의 range를 업데이트합니다

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우

updateAlignPos

Camera의 alignPosition을 업데이트합니다

Returns: this

updateAnchors

Camera의 anchorPoints를 업데이트합니다

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우

updateAdaptiveHeight

현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING init이 이전에 호출되지 않은 경우

updateOffset

현재 카메라의 오프셋을 업데이트합니다

Returns: this

resetNeedPanelHistory

발생한 needPanel 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다

Returns: this

applyTransform

현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.

Returns: this