반응형

휴대폰 화면보다 큰 이미지를 배경으로 드래그 스크롤 하면서 동작하는 앱을 만들 때 사용하면 좋겠습니다.

- 기본 원리는 canvas 위쪽과 왼쪽에 크기 조절용 component (VerticalArrangement, HorizontalArrangement, Image, 등) 을 두고 이것의 크기를 조절하면 canvas 중에서 휴대폰 화면에 보이는 부분이 정해지는 원리입니다.

 


앱 구상

[참고 앱]

https://appinventor.mit.edu/explore/blogs/karen/2018/03.html

Responsive Design: Drag a Canvas larger than screen size

 

기본기능

1. 화면보다 큰 이미지를 canvas 배경으로 설정하고 드래그 스크롤 가능하도록 한다.

2. canvas에 image sprite를 추가하고 드래그하여 움직일 수 있도록 한다.

 


앱 제작

1. 화면 디자인

2. 블록 코딩

- 변수 설정

- canvas 크기를 결정할 배경 이미지 크기

- 처음 휴대폰 화면크기

- 위치 조절용 component의 최대 크기

- 시작하면 init 함수 호출

- canvas 크기와 배경 이미지 설정

- 전체 화면크기는 배경 이미지 * 2

- 보이는 부분을 결정하는 크기 조절용 component (sH, sW) 크기 설정

- 크기 조절용 component (sH, sW) 최대 크기 저장

- canvas를 드래그했을 때 image sprite를 드래그한 것이 아니라면 (빨간 box)

- 드래그한 만큼 크기 조절용 compnent 크기 변경

- image sprite 드래그하여 위치 변경

3. 실행 화면

4. 프로그램 소스(aia)

canvas_scroll_2020702.aia
0.68MB

 


 

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[make app] app inventor 소개

 


 

반응형

+ Recent posts