본문으로 건너뛰기
버전: 4.4.2

Camera

class Camera

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

Properties
Methods
element
children
position
alignPosition
offset
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
align
updateRange
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
resetNeedPanelHistory
applyTransform

Constructor​

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

Properties​

element​

readonly

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

Type: HTMLElement

children​

readonly

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

Type: Array<HTMLElement>

position​

readonly

Camera의 현재 좌표

Type: number

alignPosition​

readonly

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

Type: number

offset​

readonly

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

Type: number

Default: 0

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​

updateRange​

Camera의 range를 업데이트합니다

Returns: this

Throws: FlickingError

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

init​

Camera를 초기화합니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
flickingFlickingFlicking의 인스턴스

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의 인스턴스

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