[phina.js] 요소를 스크롤 할 수있는 액세서리를 만들어 보았습니다.

phina.js의 어드벤트 캘린더 2017의 7일째입니다.
6일째의 기사를 읽고, 스스로 제대로 실장해 보고 싶다고 생각해 보았습니다.

phina.js에서 브라우저 스타일 터치 스크롤 - Qiita (6 일째 기사)

클래스 자체는 구현하고 있으면, 상당히 길어져 버렸으므로, 코드는 gist 에 있어 있습니다.

phina.js를 로드한 후 이 URL을 로드하여 사용할 수 있습니다.
h tps://등 w의t. 작은 m/시미라 아아/8c0d6bf92 ㅇ C4b0d4 쏘고 c7 아 b7 아 7b72b/등 w/039176929 굉장히 c2838 c0FC7b303b8 타 c77512 그림 51 그림/Sc로 ぁbぇ. js
<script src="https://rawgit.com/simiraaaa/8c0d6bf92cc4b0d4ddedac7ab7a7b72b/raw/039176929aec2838cc0fc7b303b8dac77512e51e/Scrollable.js"></script>

Scrollable 사용법

스크롤할 수 있는 액세서리의 클래스 이름은 Scrollable입니다.
Accessory를 상속합니다.
Element계의 클래스에 attach 해 사용합니다.

최소 샘플

Scrollable().attachTo(this);씬의 init내에서 이 1행만으로 씬의 요소 전부가 스크롤 되게 됩니다.

[phina.js] 요소를 스크롤 할 수있는 액세서리 최소 샘플 | Runstant

테두리 밖을 그리지 않도록 합니다.

enableClip()

테두리 밖을 그리지 않도록 합니다.
enableClip 샘플

disableClip()

테두리 밖을 그리도록 합니다.

friction, setFriction (마찰)

최소 0, 최대 1로 마찰을 설정할 수 있습니다.

lock(), unlock()

lock()으로 스크롤할 수 없게 합니다.
unlock()로 스크롤할 수 있게 됩니다.

최대 스크롤 위치 설정

minX, minY, maxX, maxY

minX = 스크롤 가능한 x축 최소값

minY = 스크롤 가능한 y축 최소값

maxX = 스크롤 가능한 x축 최대값

maxY = 스크롤 가능한 y축 최대값

setMinPosition(minX, minY)

minX, minY를 설정할 수 있습니다.

setMaxPosition(maxX, maxY)

maxX, maxY를 설정할 수 있습니다.

스크롤 방법

scrollType 스크롤 방법을 설정할 수 있습니다.
기본값은 'normal'입니다.
setScrollType(type)에서도 설정할 수 있습니다.

수평 스크롤 고정

scrollType에 'x'를 설정합니다.

세로 스크롤 고정

scrollType에 'y'를 설정합니다.

종횡 스크롤

scrollType에 'normal'를 설정합니다.
스크롤의 양이 큰 쪽만이 스크롤 합니다.

플릭 (자유 스크롤)

scrollType에 'flick'를 설정합니다.
움직인 방향으로 움직입니다.

자주 사용하는 방법

일반적으로 있을 것 같은 느낌의 견본

일반적인 사용법 샘플 | Runstant

엉망진창 샘플

삐걱 거리는 샘플 | Runstant

후기

구현하고 나서 알아차린 것은 min과 max의 플러스 마이너스가 이미지와 반대가 된다는 것입니다.
좌표적으로는 확실히 y가 마이너스가 될 정도로 위로 스크롤하고 있습니다만, 스크롤의 최대치라고 하면 이미지적으로는 반대이므로, setMaxPosition과 setMinPosition은 플러스 마이너스 반전시키는 편이 좋은 것일까 하는 것이 고민 커녕.