앱인벤터 캔버스 컴포넌트
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 앱인벤터의 캔버스 컴포넌트를 활용하여 스마트폰에서 그리기나 애니메이션 동작을 실현할 수 있는 캔버스에 대해서 실습을 해보자. 캔버스라는 단어에서 알 수 있듯이 그림을 그릴 때 사용하는 캔버스, 즉 도화지를 의미한다. 캔버스 위에 그림을 그리거나 애니메이션 동작 등의 기본 바탕을 제공하는 것이 캔버스이다. 캔버스 위에는 공과 이미지 스프라이트 컴포넌트를 활용하여 그리기와 애니메이션 동작을 사용할 수 있다.
. 캔버스 컴포넌트
그리기&애니메이션 팔레트에서 캔버스 컴포넌트가 있다. 처음 볼 컴포넌트를 drag&drop하면 작은 사각형 모양이 나오고 너비와 높이로 캔버스의 크기를 조절할 수 있다. 아래 그림에는 높이는 300픽셀, 너비는 '부모 너비에 맞춤'으로 설정한 캔버스의 형태이다.
팔레트
캔버스 컴포넌트는 '그리기&애니메이션'에 있다. 캔버스 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 본 예제에서는 캔버스 컴포넌트에 손을 드래그하면 선이 그려지는 간단한 그리기 앱을 만들어보자
뷰어
컴포넌트들을 추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.
뷰어에는 캔버스 컴포넌트로 구성되어 있다.
캔버스 위에 손을 드래그하면 선이 그려지는 간단한 그리기 앱을 만들어보자
컴포넌트
컴포넌트에는 Screen1아래에 캔버스 컴포넌트로 구성된다.
. 캔버스 컴포넌트
캔버스 속성값
캔버스 속성값에는 배경색, 배경이미지, ExtendMoveOutsideCanvas, 글꼴크기, 높이, 너비, 선두께, 페인트색상, TapThreshold, 텍스트정렬, 보이기여부 등의 속성값이 있다. 이 중에서 중복되는 것은 설명을 제외하고 캔버스 컴포넌트에 특화된 배경이미지, ExtendMoveOutsideCanvas, 선두께 TapThreshold 속성값을 살펴보고자 한다.
배경이미지 속성값은 버튼 컴포넌트 등에서 다루어보았던 속성값이다, 캔버스의 배경이미지를 지정한다. 보통 그림파일을 지정할 수 있다.
ExtendMovesOutsideCanvs 속성값은 true false값으로 지정할 수 있다. 의미는 드래그 중 캔버스를 벗어나도 계속 이동할지 여부를 설정하는 것으로 true이면 계속 이동을 활성하는 것이다. 기본값은 체크 해제로 false 값이다.
선두께는 캔버스에 점이나 선을 그릴 때 선의 두께를 지정한다.
TapThreshold 속성값은 터치와 드래그의 경계를 구분할 때 사용하는 값으로 값이 50이면 50픽셀 이상 드래그해야 드래그로 판정하는 것이고 50이하이면 터치로 판정하는 것이다. 기본값은 15이다.
캔버스 컴포넌트 이벤트 블럭들
캔버스 컴포넌트의 이벤트 블럭에는 드래그, 플링했을때, 터치다운했을때, 터치업했을때, 터치했을때 이벤트 블럭이 있다. 하나씩 살펴보자
. 캔버스 컴포넌트 드래그 블럭
캔버스 컴포넌트에 드래그 이벤트가 발생될 때 실행되는 블럭이다. 드래그로 판정되었을 때 일회성으로 판정이 되어 호출되는 것이 아니라, 드래그를 계속 하면 계속 호출이 실행이 된다.
인자값으로 시작X, 시작Y, 이전X, 이전Y, 현재X, 현재Y, 드래그된모든스프라이트 값이 전달된다.
인자값 시작X와 시작Y는 현재 드래그로 판정되었을 때 시작된 점의 X, Y좌표값을 전달해준다.
인자값 이전X와 이전Y는 현재 드래그로 판정되었을 때 바로 이전에 지나쳤던 X, Y좌표값을 전달해준다.
인자값 현재X와 현재Y는 현재 드래그로 판정되었을 때 현재 지나가고 있는 점의 X, Y좌표값을 전달해준다.
'드래그된모든스프라이트' 인자값은 논리값(true, false)로, 드래그로 판정되었을 때 근처에 스프라이트가 드래그하는 것처럼 인정이 되면 참을 아니면 거짓을 반환한다.
. 캔버스 컴포넌트 플링했을때 블럭
플링이란 스마트폰에서 손으로 빠르게 화면을 쓸어넘겨 화면을 튕기듯이 손가락으로 미는 동작을 의미한다.
캔버스에서 플링 동작으로 판정될 때 해당 블럭이 호출된다.
인자값으로 X, Y, 속도, 방향, X속도, Y속도, 플링된스프라이트 값이 전달된다.
인자값 X와 Y는 현재 플링으로 판정되었을 때 시작된 점의 X, Y좌표값을 전달해준다.
인자값 속도는 플링의 속도값으로, 앱인벤터에서 속도값은 밀리초당 움직이는 픽셀수를 의미한다. 예로 100이면 밀리초당 100픽셀을 이동하는 속도이다.
인자값 플링방향은 0~360값으로 플링의 방향값을 전달받는다.
인자값 X속도와 Y속도는 플링시 X방향과 Y방향으로의 밀리초당 움직이는 픽셀수를 전달받는다.
'플링된스프라이트' 인자값은 플링 시작 때에 스프라이트가 있을 경우 참값을 없으면 거짓값을 전달받는다.
. 캔버스 컴포넌트 터치다운했을때 블럭
사용자가 캔버스를 터치 다운했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다.
. 캔버스 컴포넌트 터치업했을때 블럭
사용자가 캔버스를 터치 다운업했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다.
. 캔버스 컴포넌트 터치했을때 블럭
사용자가 캔버스를 터치했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다.
캔버스 컴포넌트 호출 블럭들
캔버스 컴포넌트의 호출 블럭은 지우기, 원호그리기, 원그리기, 선그리기, 점그리기, 도형그리기, 글자쓰기, 기울어진텍스트그리기, 배경픽셀색상가져오기, 픽셀색상가져오기, 저장하기, 다른이름으로저장하기, 배경픽셀색상지정하기 블럭이 있다.
. 캔버스 컴포넌트 지우기 블럭
캔버스에 그려진 모든 것(선, 원, 도형, 텍스트 등)을 지우고 빈 화면으로 만든다.
. 캔버스 컴포넌트 원호그리기 블럭
캔버스에 원호를 그리는 블럭이다.
입력값으로 왼쪽, 위, 오른쪽, 아래, 시작각도, 스윕각도, 중심사용, 채우기 값을 입력해야 원호를 그릴 수 있다.
왼쪽, 위, 오른쪽, 아래값은 좌표값을 입력받는다. 좌표값을 연결하여 타원을 그린다고 생각하면 된다.
'시작각도' 값은 오른쪽편 타원의 중심에서 그린 가로선을 기준으로 시계방향 각도(도)입니다.
'스윕각도' 값에 의해 호의 각도와 길이가 정해진다.
'중심사용' 값이 참이면 원 호의 양 끝점을 연결하는 것이고 거짓이면 호가 둥근 호가 그려지게 된다.
'채우기' 값이 참이면 호에 색을 채우며, 거짓이면 투명이다.
. 캔버스 컴포넌트 원그리기 블럭
캔버스에 원을 그리는 블럭이다.
입력값으로 중심X, 중심Y, 반지름, 채우기 값을 입력해야 한다.
중심X, 중심Y 값은 원의 중심 좌표값이다.
반지름은 원의 반지름 값이다.
채우기 값은 논리값으로 참값이면 원에 색을 채우며 거짓이면 색채우기가 없다.
. 캔버스 컴포넌트 선그리기 블럭
캔버스에 선을 그리는 블럭이다.
입력값으로 X1, Y1, X2, Y2 좌표값을 입력받으면 두 점을 잇는 선을 그린다.
. 캔버스 컴포넌트 점그리기 블럭
캔버스에 점을 찍는 블럭이다.
입력값으로 X, Y좌표 값을 입력받으며, 해당 좌표에 점을 그린다.
점의 크기는 캔버스의 선두께 속성값에 의해 정해진다.
. 캔버스 컴포넌트 도형그리기 블럭
캔버스에 다각형 도형 그리기를 제공하는 블럭이다.
입력값으로 꼭지점리스트와 채우기 값이 있다.
꼭지점리스트는 X, Y좌표 쌍의 점 리스트를 받아서 그 점들을 직선으로 연결하여 다각형을 그린다.
꼭지점리스트에 X,Y 좌표가 3개이면 삼각형, 4개이면 사각형, 5개면 오각형의 도형을 그린다.
채우기가 참이면 다각형 내부를 페인트 색상으로 채우고, 거짓이면 윤곽선만 그린다.
. 캔버스 컴포넌트 글자쓰기 블럭
캔버스에 글자를 그리는 블럭이다.
입력값으로 텍스트와 X, Y 좌표값을 받는다. X, Y좌표에 텍스트를 출력하는 블럭이다.
. 캔버스 컴포넌트 기울어진텍스트그리기 블럭
캔버스에 텍스트를 회전시켜 글자를 그리는 블럭이다.
입력값으로 텍스트와 X, Y 좌표값 그리고 각도 값을 받는다. X, Y좌표에 텍스트를 출력하는데 각도 기울기에 따라 글자를 회전시켜 글자를 그려준다.
. 캔버스 컴포넌트 배경픽셀색상가져오기 블럭
캔버스에 특정 좌표에 배경픽셀의 색상을 가져오는 블럭이다.
입력값으로 X, Y 좌표값 받는다. 특정 좌표에 캔버스 픽셀의 색상값을 반환해준다.
해당 좌표에 스프라이트나 공이 있는 경우에도 캔버스의 색상을 반환해준다.
. 캔버스 컴포넌트 픽셀색상가져오기 블럭
캔버스에 특정 좌표에 스프라이트(공 및 이미지 스프라이트)의 색상을 가져오는 블럭이다.
입력값으로 X, Y 좌표값 받는다. 특정 좌표에 있는 스프라이트의 색상값을 반환해준다.
. 캔버스 컴포넌트 저장하기 블럭
캔버스에 보이는 것들을 스마트폰에 사진 파일로 저장한다. 사진의 크기는 캔버스의 크기와 동일하며 파일 확장자로는 jgp, jpeg, png 중 하나를 사용해야 한다. 저장 경로는 외부 저장소(내장 메모리)/My Documents/Pictures/이며 파일명은 현재 시간의 밀리초를 포함하여 자동으로 지정된다.
블럭의 반환값은 저장된 경로(텍스트)이다.
. 캔버스 컴포넌트 다른이름으로저장하기 블럭
캔버스에 보이는 것들을 스마트폰에 지정한 파일이름으로 사진 파일로 저장한다. 사진의 크기는 캔버스의 크기와 동일하며 파일 확장자로는 jgp, jpeg, png 중 하나를 사용해야 한다.
블럭의 반환값은 저장된 경로(텍스트)이다.
. 캔버스 컴포넌트 배경픽셀색상지정하기 블럭
캔버스에 입력받은 좌표값의 점의 색상을 입력받은 색상값으로 변경하는 블럭이다.
배경픽셀색상지정하기는 좌표에 스프라이트가 있을 경우, 캔버스 배경색을 지정하지 스프라이트에는 적용이 되지 않는다.
캔버스 컴포넌트 가져오기/지정하기 블럭들
가져오기/지정하기 블럭에서 글꼴크기, 높이, 높이비율, 페인트색상, 텍스트정렬, 너비, 너비퍼센트 등의 블럭은 기본 블럭 등에서 설명한 부분이라 설명을 제외할 것이다. 필요하면 버튼이나 레이블 컴포넌트에서 참고하면 된다.
. 캔버스 컴포넌트 배경이미지 블럭
캔버스의 배경이미지를 입력받은 이미지 파일로 변경하거나 가져오는 블럭이다.
. 캔버스 컴포넌트 BackgoundImageinBase64 블럭
Base64로 인코딩된 이미지를 배경이미지로 지정하거나 가져오는 블럭이다.
'Base64' 는 데이터를 64진법으로 나타내는 것으로 0부터 63까지로 나타낸다. 좀더 자세히 이야기하면 Binary 데이터를 아스키 코드 이불와 일대일로 매칭되는 문자열로 단순 치환되는 인코딩 방식이다.
지정하기 입력값은 Base64로 인코딩 된 이미지를 지정한다.
. 캔버스 컴포넌트 ExtendMovesOutsideCanvas 블럭
지정하기 값은 true 혹은 false값을 지정할 수 있으며, true이면 드래그 중에 캔버스를 벗어나도 계속 이동을 할지 여부를 지정한다.
기본값은 false 이다.
. 캔버스 컴포넌트 선두께 블럭
캔버스에서 선을 그릴 때 선의 두께를 지정하거나 지정된 값을 가져오는 블럭이다.
. 캔버스 컴포넌트 TapThreshold 블럭
캔버스에서 터치와 드래그의 경계를 구분할 때 사용하는 임계치 값이다. 예로 50이면 50픽셀 이상 드래그해야 드래그로 판정한다. 50 미만이면 터치로 인정한다. 기본값은 15이다.
지금까지 앱인벤터 볼 컴포넌트에 대해 설명하였다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다
'앱인벤터 > 앱인벤터 컴포넌트' 카테고리의 다른 글
| 앱인벤터 지도 컴포넌트 (0) | 2022.04.08 |
|---|---|
| 앱인벤터 이미지스프라이트 컴포넌트 (1) | 2022.02.24 |
| 앱인벤터 볼 컴포넌트 (0) | 2022.02.21 |
| 앱인벤터 얀덱스번역 컴포넌트 (0) | 2022.02.20 |
| 앱인벤터 비디어플레이어 컴포넌트 (0) | 2022.02.19 |
댓글