[앱인벤터 기초] 그리기&애니매이션 - 캔버스 이해하기

앱인벤터에서 캔버스 컴포넌트는 그림을 그리거나 '공' 또는 '이미지스프라이트'가 움직일 수 있는 공간입니다. 손가락으로 할 수 있는 액션(드래그, 플링, 터치)에 대해서 이벤트를 호출할 수 있습니다. 터치되는 위치는 X, Y 좌표 값으로 가져올 수 있습니다. X는 왼쪽에서부터 떨어진 픽셀 수입니다. Y는 위쪽에서부터 떨어진 픽셀 수입니다. 캔버스 안에 선, 원, 원호, 도형, 글자를 그리거나 표시할 수 있습니다. 

---

캔버스 블록

 

블록	설명
	사용자가 캔버스를 드래그 할 때 발생하는 이벤트입니다. 드래그는 처음 시작하는 지점(시작X, 시작Y), 이전 지점(이전X, 이전Y), 현재 지점(현재X, 현재Y) 값을 가져올 수 있습니다.
	사용자가 캔버스를 플링(빠른 스와이프) 했을 때 발생하는 이벤트입니다. 왼쪽 상단을 기준으로 플링 시작의 좌표(x,y) 값을 제공합니다. 플링의 속도(ms)와 방향(0~360도), x속도와 y속도 값을 가져올 수 있습니다. 스프라이트가 플링 제스처 근처에 있으면 '플링된스프라이트' 값이 참이 됩니다.
	사용자가 캔버스를 터치하고 있을 때 발생하는 이벤트입니다. 터치한 곳의 좌표 값을 가져올 수 있습니다.
	사용자가 캔버스를 터치하고 나서 손가락을 땔 때 발생하는 이벤트입니다. 터치한 곳의 좌표 값을 가져올 수 있습니다.
	사용자가 캔버스를 터치할 때 발생하는 이벤트입니다. 터치한 곳의 좌표 값을 가져올 수 있습니다. 스프라이트를 터치한 경우 '터치된스프라이트' 값이 참이 됩니다.
	캔버스 안에 내용을 지웁니다. 배경이미지는 그대로 유지됩니다.
	캔버스에 호를 그립니다. 오른쪽으로 향하면 시작 각도가 0이고 시계방향으로 회전하면 증가합니다.
	캔버스에 원을 그립니다. 중심좌표를 기준으로 반지름 값을 가진 원이 그려집니다. 채우기가 참이면 원 안이 채워지게 그려집니다.
	캔버스에 선을 그립니다. 선을 그리기 위에서 두개의 좌표가 필요합니다.
	주어진 좌표에 점을 그립니다.
	캔버스에 도형을 그립니다. 꼭지점리스트는 좌표를 나타내는 두 개의 숫자가 있는 리스트가 필요합니다. 첫번째 점과 마지막 점이 같을 필요는 없습니다.
	캔버스에 글자를 표시합니다. 지정된 좌표에 글자를 입력합니다.
	캔버스에 글자를 표시합니다. 지정된 좌표와 각도로 글자를 입력합니다.
	스프라이트를 무시하고 지정 좌표의 배경 색상을 가져옵니다.
	스프라이트를 포함하고 지정 좌표의 색상을 가져옵니다.
	캔버스 안에 포함된 내용을 저장합니다. 스마트폰의 외부 저장소에 저장합니다.
	캔버스 안에 포함된 내용을 다른이름으로 저장합니다. 파일확장명은 ' .jpg ' , ' .jpeg ', '.png ' 중 끝나야 합니다.
	주어진 좌표의 배경색상을 설정합니다. 좌표가 캔버스 범위를 벗어난 경우에는 동작하지 않습니다.
	배경색을 가져오거나 변경할 수 있는 블록입니다. 기본적으로 rgba 배경값을 가지고 있습니다.
	캔버스에 이미지 값을 가져오거나 변경할 수 있는 블록입니다. 글자 속성을 사용합니다. 배경색과 이미지가 같이 설정되 있을 경우, 이미지만 보이게 됩니다.
	캔버스의 배경이미지를 Base64 형식으로설정합니다. API 버전이 8이상이여야 합니다.
	캔버스의 경계(범위)를 넘어 밖으로 이동할 수 있게 설정할 수있는 블록입니다. 기본값은 거짓(false)입니다.
	글자크키를 가져오거나 변경할 수 있는 블록입니다. 단위는 sp(scale-independent pixels)를 사용합니다.
	세로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 높이비율은 스크린의 높이를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.
	캔버스에 그려지는 선의 두께를 가져오거나 변경할 수 있는 블록입니다. 숫자 속성을 사용합니다.
	캔버스의 페인트색상(그리는 색상)을 가져오거나 변경할 수 있는 블록입니다. rgba 속성을 사용합니다.
	캔버스 안에 글자들의 정렬을 선택할 수 있습니다. (왼쪽, 가운데, 오른쪽)
	보이기여부 값을 가져오거나 변경할 수 있는 블록입니다. 참, 거짓 속성을 사용합니다. 참이면 캔버스가 보이고 거짓이면 캔버스가 화면에서 보이지 않습니다.
	가로길이 값을 가져오거나 변경할 수 있는 블록입니다. 숫자 속성(픽셀 단위)을 사용합니다. 너비비율은 스크린의 너비를 기준으로 몇 퍼센트를 가질지 변경할 수 있습니다.