앱인벤터 그림그리기 앱만들기



엔트리와 스크래치2.0 로 그림판을 아주 간단히 만들어 봤는데요 이번에는 앱인벤터로 그림을 그릴 수 있는 간단한 앱을 만들어보겠습니다. 


이번 시간에는 간단하게 손으로 스마트폰 화면을 안에서 손가락으로 드래그하면 선이 그려지는 그림그리기앱을 만들어 보겠습니다.




앱인벤터 그림그리기 앱만들기




화면 디자인


그림을 그리기 위해서는 그림을 그릴 수 있는 스케치북 같음 무언가가 필요한데요 앱을 만들 때에도 그 무언가가 필요합니다. 여기서는 캔버스라는 컴퍼넌트가 필요합니다.  [그리기 & 애니메이션]을 클릭한 다음 [캔버스] 를 드래그하여 뷰어에 옮겨 놓습니니다.


이번에는 캔버스의 크기를 맞춰 줄 것입니다. 화면 전체 다 사용을 할 것이기 때문에 화면을 크게 맞춰 줘야합니다. 먼저 컴포넌트에 있는 [캔버스1]을 선택을 해준 다음 높이와 너비 모두 [부모에 맞추기]로 설정을 해줍니다.



블록 코딩하기


선을 그리는 코드를 작성하기 전에 먼저 컴퓨터가 선을 어떻게 긋는지를 이해하셔야할 것 같아습니다. 우리가 스마트폰에 손가락을 가져다가 놓으면 컴퓨터는 처음 손가락이 있던 지점의 x좌표와 Y좌표를 기억을 합니다.


그리고 손가락을 이동을 하면 또 다른 X좌표와 Y좌표를 기억을 하지요 그 다음 선을 있습니다. 아주 작은 미세한 조차 다 좌표로 이어지는 것이니 우리는 선으로 보입니다.



쉽게 설명을 하려고 했는데 잘 설명을 드린건지 모르겠네요

그냥 코드를 만들어 보겠습니다. 먼저 캔버스1을 선택하고 오른쪽에 사용할 수 있는 블록들이 나오는데 여서거 먼저 파란색 블럭을 가지고 옯니다. 


그리고 호출 캔버스 선그리기 블록도 가지고 옮니다.

처음 블록과 호출 블록을 그림과 같이 결합을 해줍니다. 그리고 이제 [호출 캔버스1. 선그리] 블록안에 X좌표와 Y좌표를 넣어 줄 것인데요 쉽게하는 방법은 먼저 [이전X] 부분에 마우스를 올려 놓아보세요


그러면 두개의 블록이 또 나옵니다. 여기서 첫번째 [가져오기 이전X]를 가져오 놓습니다.


이전 Y좌표 값도 마찬가지로 위와 같이 가져오 옮겨 놓습니다.


나머지 현재X 좌표와 현재Y 좌표도 가져와서 놓으면 아래와 같이 코드가 완성됩니다.



이제 빌드를 해보시고 앱이 정상적으로 작동을 하는지 확을을 해보세요 손가락으로 그림을 그려 보면 되겠지요

캔버스 컴퍼넌트는 여러가지로 많이 사용할 수 있습니다. 이미지를 움직일 때에도 필요하지요 지금은 아주 간단하게 그림을 그리는 앱을 만들어 보았는데요 여기에 버튼을 추가해서 선의 굵기를 조절도 하면 참 좋겠습니다.


이상으로 앱인베터 그림그리기 앱만들기였습니다. 재미있는 앱을 만들어 보세요 ^^


반응형

댓글

Designed by JB FACTORY