앱인벤터 강좌 - 캔버스 이용하여 그림그리기

앱인벤터 강좌 캔버스 - 그림그리기

앱인벤터 이번 시간에는 캔버스를 이용하여 스마트폰 화면에 그림을 그려 보도록 하겠습니다.

앱인벤터 캔버스 - 그림그리기

화면구성

▲ 팔레트에서 [그리기&애니메이션]에 들어 있는 캔버스를 뷰어 화면에 옮겨 놓습니다.

▲ 캔버스 속성에서 높이와 너비를 부모에 맞추기를 선택하여 캔버스가 화면에 꽉 차게 합니다.

블록설정하기

▲ 블록으로 이동한 뒤 [캔버스1]을 클릭하여 위 블록을 가져와 배치를 합니다.

▲ 캔버스에서 우리가 할 일은 선을 그리는 일이기 때문에 [호출 캔버스1. 선그리기]블록을 가져옵니다.

▲ 블럭을 위 그림 처럼 두개를 맞춰 줍니다.

▲ 이전X 위에 마우스를 올려 놓으면 위 그림 처럼 [가져오기 이전 X]와 [지정하기 이전X]값이 나타납니다.

 [가져오기 이전 X]을 클릭하여 X1 값에 넣어 줍니다.

▲ [이전Y]에 마우스를 올려 놓고 [가져오기 이전Y] 값을 가져옵니다. 

▲ 위 코드는 스마트폰에서 처음 화면에 X, Y의 좌표 값을 구합니다.

▲ X2, Y2 값도 같은 방법으로 가져 옵니다.

▲ 캔버스에 선을 그리는 코드가 완성 되었습니다. ^^