NEW 앱인벤터2 강좌33. 컴포넌트 탐구 – 캔버스(Canvas)

이 글은 읽는데 약 15분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html


0. 개요

드디어 그리기&애니메이션 부분으로 넘어왔습니다.
이 카테고리에는 공, 캔버스, 이미지 스프라이트의 딱 3가지 밖에 없습니다.
그렇지만 블록은 매우 많다는 것을 알 수 있습니다. 이 블록들을 한번 자세히 알아봅시다.
슬슬 재미있어지는군요.

참고록 앱인벤터 팔레트에서는 공 컴포넌트가 먼저 나오지만, 공과 이미지 스프라이트 컴포넌트 모두 캔버스 컴포넌트 내부에서만 작동하므로, 여기서는 기본 베이스인 캔버스를 먼저 알아보겠습니다.

캔버스는 그림을 그릴 때 쓰는 캔버스와 같은 뜻입니다. 이 캔버스 위에 사용자는 그림을 그리거나 도형 또는 사진을 표시할 수 있습니다.
캔버스 컴포넌트 안에는 공과 이미지 스프라이트 컴포넌트를 포함할 수 있으며, 이 두 컴포넌트 또한 캔버스 컴포넌트 내부에만 포함될 수 있습니다.

1. 형태

기본적인 모양은 보시는 바와 같이 캔버스 컴포넌트 아이콘이 가운데에 떠있는 사각형으로 표시됩니다.
저 영역 내부에서 그리기 등을 수행할 수 있습니다.
크기는 원하는대로 조정해 주시면 됩니다.

2. 속성

캔버스(Canvas) 속성

속성명

설명

배경색(BackgroundColor)

캔버스의 배경색상을 지정합니다.

배경이미지(BackgroundImage)

캔버스의 배경이미지를 지정합니다.

ExtendMovesOutsideCanvas

체크되면 드래그 중 캔버스를 벗어나도 계속 이동을 할 지 여부를 지정합니다.

다만 이것을 활성화해도 내부 개체는 캔버스 밖을 벗어나지는 못합니다.

기본값은 거짓입니다.

글꼴크기(FontSize)

캔버스에 텍스트를 그릴 때 사용할 텍스트의 크기를 지정합니다.

높이(Height)

캔버스의 높이를 px로 지정합니다.

너비(Width)

캔버스의 너비를 px로 지정합니다.

선두께(LineWidth)

캔버스에 점이나 선을 그릴 때 사용할 선의 두께를 지정합니다.

페인트 색상(PaintColor)

캔버스에 선이나 텍스트 등을 그릴 때 사용할 색상을 지정합니다.

TapThreshold

터치와 드래그의 경계를 구분할 때 쓰는 값입니다.

예시로 100이면 100픽셀 이상 드래그 해야 드래그로 판정합니다.

그 미만이면 터치로 인식합니다.

기본값은 15입니다.

텍스트정렬(TetAlignment)

캔버스에 텍스트를 그릴 때 정렬을 지정합니다.

보이기여부(Visible)

캔버스의 보이기 여부를 지정합니다.

3. 블록

사진 위에 ★이 붙어있는 블록은 글 하단에 상세 설명이 있습니다.

캔버스(Canvas) 이벤트 블록

블록

설명

ㄴ 시작X [숫자]

ㄴ 시작Y [숫자]

ㄴ 이전X [숫자]

ㄴ 이전Y [숫자]

ㄴ 현재X [숫자]

ㄴ 현재Y [숫자]

ㄴ 드래그된모든스프라이트 [논리]

캔버스가 드래그될 때 실행됩니다.

한순간만 실행되는것이 아니라, 드래그 중에도 지속적으로 계속 실행되는겁니다.

매개변수 시작X, 시작Y는 현재 이어지고 있는 드래그 동작이 시작된 점의 좌표를 반환합니다.

매개변수 이전X, 이전Y는 드래그 중일 때, 현재 지나가고 있는 점 바로 이전에 지나쳤던 점의 좌표를 반환합니다.

매개변수 현재X, 현재Y는 드래그 중일 때, 현재 지나가고 있는 점의 좌표를 반환합니다.

매개변수 드래그된모든스프라이트는 드래그 시작점 근처에 스프라이트가 있어서 그 스프라이트를 드래그 하는 것 처럼되면 참을, 아니면 거짓을 반환합니다.

역이 이상한겁니다.

ㄴ X [숫자]

ㄴ Y [숫자]

ㄴ 속도 [숫자]

ㄴ 방향 [숫자]

ㄴ X속도 [숫자]

ㄴ Y속도 [숫자]

ㄴ 플링된스프라이트 [논리]

캔버스에서 플링 동작을 했을 때 실행됩니다.

플링이란 빠른 스와이프로, 화면을 마치 튕기듯이 손가락으로 미는 동작입니다.

매개변수 X, Y는 플링이 시작된 지점의 좌표입니다.

매개변수 속도는 플링의 속도(밀리초당 픽셀 수)입니다.

매개변수 방향은 플링 방향(-180도 ~ 180도)*입니다.

*각주: 레퍼런스에는 0~360이라 되어있으나 실제로 해보면 -180~180으로 나옵니다. 자세한건 아래 상세 문단 참조.

매개변수 X속도, Y속도는 플링시 X방향과 Y방향으로의 속도입니다.

매개변수 플링된스프라이트는 플링 시작 지점에 스프라이트가 있을 경우 참을, 아니면 거짓을 반환합니다.

마찬가지로 번역이 이상한것입니다.

ㄴ x [숫자]

ㄴ y [숫자]

캔버스의 어느 지점에 손이 닿는 순간 실행됩니다.

매개변수 x, y로 터치 다운한 지점의 좌표를 가져올 수 있습니다.

ㄴ x [숫자]

ㄴ y [숫자]

캔버스의 어느 지점에서 손이 떨어지는 순간 실행됩니다.

매개변수 x, y로 터치 업한 지점의 좌표를 가져올 수 있습니다.

ㄴ x [숫자]

ㄴ y [숫자]

ㄴ 터치된스프라이트 [논리]

캔버스의 어느 지점을 터치하면 실행됩니다.

매개변수 x, y로 터치한 지점의 좌표를 가져올 수 있습니다.

매개변수 터치된스프라이트는 만약 이 터치가 스프라이트위를 터치했다면 참을, 아니면 거짓을 반환합니다.

이것도 번역이 터치한 스프라이트를 가져오는 것으로 이해할 오해의 소지가 있네요.

캔버스(Canvas) 함수 블록

블록

설명

캔버스에 그려진 모든 것(배경색, 도형, 텍스트 등 모든 것)을 지우고 빈 화면으로 만듭니다.

단, 배경이미지가 있는 경우에는 배경이미지는 지우지 않습니다.

ㄴ 왼쪽 [숫자]

ㄴ 위 [숫자]

ㄴ 오른쪽 [숫자]

ㄴ 아래 [숫자]

ㄴ 시작각도 [숫자]

ㄴ 스윕각도 [숫자]

ㄴ 중심사용 [숫자]

ㄴ 채우기 [논리]

먼저 왼쪽, 위, 오른쪽, 아래 좌표를 입력받습니다.

그 좌표들을 기준으로하는 타원이 있다고 생각하고

오른쪽 부터 시작하는 시작각도를 기준으로 스윕각도 만큼 원의 호를 그립니다.

중심 사용이 참이면 원 호의 양 끝점과 중심점을 잇습니다.

채우기가 참이면 중심사용의 여부에 따라 원 호의 양 끝점을 이어서 채우거나 중심까지 이은 후 채웁니다.

더 자세한 사용법은 아래 문단을 읽어주세요.

ㄴ 중심X [숫자]

ㄴ 중심Y [숫자]

ㄴ 반지름 [숫자]

ㄴ 채우기 [논리]

입력받은 중심 좌표를 기준으로 입력받은 반지름을 가지는 원을 그립니다.

이 때, 채우기 여부에 따라 윤곽선만 그릴지 내부를 채울지가 결정됩니다.

ㄴ x1 [숫자]

ㄴ Y1 [숫자]

ㄴ x2 [숫자]

ㄴ Y2 [숫자]

시작점(X1, Y1)과 끝점의 (X2, Y2)의 좌표를 받아서 두 좌표를 잇는 직선을 긋습니다.

ㄴ x [숫자]

ㄴ Y [숫자]

해당 좌표에 점을 그립니다.

점은 원이 아니라 정사각형 모양이며, 크기는 선두께 속성값에 따라 조절됩니다.

ㄴ 꼭지점리스트 [리스트]

ㄴ 채우기 [숫자]

다각형을 그립니다.

좌측 사진처럼 (x y)쌍의 점 리스트를 받아서 그 점들을 직선으로 이어서 다각형을 그립니다.

이 때 시작점과 끝점의 좌표가 같을 필요는 없습니다.

채우기가 참이면 그린 후 내부를 페인트 색상으로 채우고, 거짓이면 윤곽선만 그립니다.

ㄴ 텍스트 [텍스트]

ㄴ X [숫자]

ㄴ Y [숫자]

지정된 좌표에 텍스트를 그립니다.

이 때 글꼴크기와 텍스트정렬 속성값이 이용됩니다.

ㄴ X [텍스트]

ㄴ Y [숫자]

ㄴ 각도 [숫자]

지정된 좌표에 텍스트를 지정된 각도만큼 회전시켜서 그립니다.

이 때 글꼴크기와 텍스트정렬 속성값이 이용됩니다.

주의할점은 텍스트가 기울어 졌다는 것은 이텔릭체 처럼 기울어졌다라는 뜻이 아니라 텍스트 자체가 회전이 됐다는 뜻입니다.

각도는 0도가 기준(우리가 보통 보는 텍스트 방향)으로 반시계 방향으로 갑니다.

ㄴ X [숫자]

ㄴ Y [숫자]

스프라이트(공 및 이미지 스프라이트 컴포넌트)를 무시하고 캔버스의 색상을 가져옵니다.

즉, 해당 좌표에 공이나 이미지 스프라이트 컴포넌트가 있어도 그것들의 색은 무시하고 그 밑에 있는 캔버스의 색을 가져옵니다.

다만, 캔버스에 그려진 도형이나 텍스트 등은 무시되지 않습니다.

ㄴ X [숫자]

ㄴ Y [숫자]

스프라이트(공 및 이미지 스프라이트 컴포넌트)를 포함하여 해당 좌표의 픽셀의 색상을 가져옵니다.

즉, 해당 지점의 색상을 사용자가 보는대로 가져옵니다.

ㄴ (반환) 저장경로 [텍스트]

캔버스에 보이는 것들을 휴대폰에 사진 파일로 저장합니다.

만약 오류가 발생하면 스크린의 [오류가 발생했을 때] 이벤트가 실행됩니다.

사진의 크기는 캔버스의 크기와 동일합니다.

파일명은 반드시 .jpg / .jpeg / .png 중 하나로 끝나야 합니다.

저장 경로는 외부 저장소(내장 메모리)/My Documents/Pictures/ 이며, 파일명은 현재 시간의 밀리초를 포함하여 자동으로 지정됩니다.

ex) (내장 메모리)/My Documents/Pictures/app_inventor_1609728388429.png

함수의 반환값은 저장된 경로(텍스트)입니다.

만약 반환값 없이 실행하고싶다면, 제어 블록 중 [결과값 무시하고 실행하기] 블록을 이용하시면됩니다.

ex)

ㄴ (반환) 저장경로 [텍스트]

캔버스에 보이는 것들을 휴대폰에 사진 파일로 저장합니다.

이 때, 파일 이름을 입력하여 저장될 파일의 이름이나 경로를 지정해줄 수 있습니다.

사진의 크기는 캔버스의 크기와 동일합니다.

파일명은 반드시 .jpg / .jpeg / .png 중 하나로 끝나야 합니다.

기준 경로는 외부 저장소(내장 메모리)의 최상위 경로입니다.

경로의 폴더가 존재하지 않으면 자동으로 생성합니다.

함수의 반환값은 저장된 경로(텍스트)입니다.

만약 반환값 없이 실행하고싶다면, 제어 블록 중 [결과값 무시하고 실행하기] 블록을 이용하시면됩니다.

ex)

ㄴ X [숫자]

ㄴ Y [숫자]

ㄴ 색상 [색상]

캔버스에서 해당 좌표의 점의 색상을 바꿉니다.

즉, 영역에 픽셀 단위로 색을 바꿀 수 있는 것입니다.

만약 좌표가 영역을 벗어난다면 아무 영향도 미치지 않습니다.

또한 터치한 좌표에 공이나 이미지 스프라이트 컴포넌트가 있더라도 그것들의 색이 변하지는 않습니다.

캔버스(Canvas) 속성 지정 블록

블록

입력형식

설명

색상

캔버스의 배경색을 지정합니다.

텍스트

캔버스의 배경 이미지를 지정합니다.

텍스트

Base64로 인코딩 된 이미지를 지정합니다.

이미지 이름이나 경로 대신 인코딩된 Base64 텍스트 값을 지정합니다.

논리

참이면 드래그 중 캔버스를 벗어나도 계속 이동을 할 지 여부를 지정합니다.

다만 이것이 참이어도 내부 개체는 캔버스 밖을 벗어나지는 못합니다.

기본값은 거짓입니다.

숫자

텍스트를 그릴 때 사용할 글꼴 크기를 지정합니다.

숫자

캔버스의 높이를 px로 지정합니다.

숫자

캔버스의 높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

숫자

선을 그릴 때 사용할 선 두께를 지정합니다.

색상

캔버스에 선이나 텍스트 등을 그릴 때 사용할 색상을 지정합니다.

숫자

터치와 드래그의 경계를 구분할 때 쓰는 값입니다.

예시로 100이면 100픽셀 이상 드래그 해야 드래그로 판정합니다.

그 미만이면 터치로 인식합니다.

기본값은 15입니다. 

숫자

텍스트를 그릴 때 정렬을 지정합니다.

왼쪽 0 / 가운데 1 / 오른쪽 2

논리

캔버스의 보이기 여부를 지정합니다.

숫자

캔버스의 너비를 px로 지정합니다.

숫자

캔버스의 너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

캔버스(Canvas) 속성 블록

블록

반환형식

색상

텍스트

논리

숫자

숫자

숫자

색상

숫자

숫자

논리

숫자

컴포넌트

4. 캔버스의 좌표

우리가 흔히 알고있는 함수 좌표 평면의 경우 원점 (0,0)은 정 중앙에 있습니다.
그러나 캔버스의 경우 캔버스 왼쪽 상단 모서리가 원점이고, 가로 세로로 갈수록 각각 X, Y값이 커집니다.
즉, 캔버스의 좌표에는 음수가 없습니다.

5-1. 드래그

이 이벤트는 사용자가 드래그를 시작할 때 부터 드래그 중일 때 좌표가 바뀔 때 마다 지속적으로 실행됩니다.
이건 알겠는데 저 많은 매개변수들은 뭘까요?

1. 시작X, 시작Y
현재 진행 중인 드래그가 시작된 지점의 좌표입니다.

2. 이전X, 이전Y
움직일 때 바로 이전에 지나쳐왔던 점의 좌표입니다.

3. 현재X, 현재Y
현재 지나가고 있는 점입니다.

즉, 만약 캔버스위의 뭔가를 드래그해서 옮기고 싶을 때, 해당 스프라이트의 이동 블록을 이벤트 블록안에 넣고, 이동 좌표로 현재X, 현재Y를 넣으시면됩니다.

말로만으로 이해가 잘 안된다면 아래와 같이 블록을 두고 테스트해보세요.
드래그 이벤트가 실행될 때 마다 각 매개변수의 점을 찍는 구조입니다.

보시면 알겠지만 시작 좌표는 하나의 드래그 동작이 끝나기 전에는 바뀌지 않습니다.
이전 좌표는 바로 직전에 지나왔던 좌표가 되죠?

참고로 저 전역변수들은 이전 좌표가 캔버스에 남아 있지 않도록 지우는 역할을 하는것입니다.
이벤트가 실행될 때 마다 넘어오는 새로운 좌표값들만 보여주기 위해서 점을 안남기도록 하는것들입니다.
만약 전역변수 관련 블록을 모두 지우시면 초록색의 이전 좌표가 캔버스에 모두 남아있게 됩니다.

5-2. 플링했을때

플링이란 위에서도 설명했듯이 손가락을 튕기듯이 미는 동작을 뜻합니다.
만약 캔버스에서 이러한 동작이 감지되면, 위 이벤트가 실행됩니다.
드래그와 달리 플링 중에 계속 실행되는것이 아닌, 플링이 종료되었을 때 한번 실행됩니다.

X, Y는 플링의 시작점 좌표입니다.
속도는 플링 속도의 밀리초당 px수입니다.

방향의 경우 조금 이상한데, 레퍼런스에는 범위가 0~360라고 되어있는데, 실제로 해보면 위 사진처럼 -180 ~ 180의 값이 나옵니다.

X속도, Y속도는 플링 동작에서 각각 X축으로 이동한 속도, Y축으로 이동한 속도를 나타냅니다.

대략적으로 위 영상과 같은 느낌이라고 봅시면됩니다.

5-3. 원호 그리기

아마 캔버스의 블록들 중 가장 햇갈리는 블록이 아닐까싶습니다.
이 블록을 설명하자면, 사방향의 좌표를 받아서, 그 좌표를 각각 최고점으로 하는 가상의 타원을 그리고, 그 타원의 시작각도 부터 스윕각도만큼 호(테두리)를 그리는 블록입니다.
이래도 이해가 잘 안되죠? 직접 봅시다.

먼저, 저 왼쪽 오른쪽 위 아래가 뜻하는 것에 대해서 알아봅시다.

예를 들어 위와 같은 가상의 타원을 두고싶다고 해볼까요?
위 타원에서 왼쪽 오른쪽 위 아래값은 어떻게 될까요?
바로 20 / 50 / 20 / 70입니다.

즉, 위 사진처럼 되는것이죠.

그럼 이제 시작 각도를 알아보겠습니다.
이상하게도 시작 각도는 오른쪽에서 시작합니다.

이렇게 저기 오른쪽 점을 기준으로 시계방향으로 각도가 커집니다.

이렇게 시작각도가 지정됐으면, 입력된 스윕각도만큼 회전한 만큼 원 호를 그리는것이지요.
만약 위처럼 사방향 값을 지정 후, 시작각도를 0, 스윕각도를 90으로 했다면

캔버스에는 저 빨간색 부분이 그려지게 될겁니다.

다시 말하지만, 저 타원 전체는 기본적으로 그려지지 않습니다. 만약 저 타원을 그리려면 시작각도를 0, 스윕각도를 360으로 해서 한바퀴 돌리면됩니다.

이제 남은건 중심사용이랑 채우기입니다. 이건 아래 표 하나로 정리 가능합니다:

채우기 참

채우기 거짓

중심사용 참

중심사용 거짓

보시다시피 중심사용은 호의 양 끝점을 타원의 중심점과 이을지 여부를,
채우기 여부는 채우기 여부를 뜻하는것을 알 수 있습니다.

5-4. 점 그리기

점 그리기는 주어진 좌표를 중심으로 하는 정사각형을 그립니다.
아마 점이라고 해서 원이 그려질것으로 예상하신 분들이 많을건데, 원이 아니라 정사각형입니다.
크기는 선두께 속성을 따릅니다.

만약 원으로 된 점을 그리고싶다면, 원그리기 블록을 써야합니다.

5-5. 도형 그리기

이 블록은 (x y)좌표쌍의 리스트를 받아서 그 점들을 순서대로 이어서 다각형을 만드는 블록입니다.
이 때, 항상 시작점과 끝점이 같을 필요는 없습니다. 만약 두 점이 다르면 그냥 시작점과 끝점을 직선으로 이어서 도형을 닫습니다.
그 외 채우기 여부로 내부를 채울지 여부도 지정가능합니다.

예를 들어 위와 같은 다각형을 그리려면 블록을 아래와 같이 하면되겠죠?

5-6. 글자 쓰기 & 기울어진 텍스트 그리기

글자 쓰기 블록은 캔버스에 글자를 표시하는 블록입니다.
일단 먼저 글자를 쓰는 좌표와 텍스트정렬 속성의 관계에 대해 알아보겠습니다.

위 사진은 입력받은 좌표에서 텍스트가 어디에 그려지는지를 보여줍니다.
빨간점이 입력받은 좌표입니다.

텍스트를 그릴 때 입력받는 좌표는 일단 텍스트 정렬과 관계없이 글자의 아래쪽이 됩니다.
그리고 텍스트 정렬에 따라 조금씩 위치가 바뀌는데, 
정렬이 왼쪽이면 좌표가 텍스트의 처음
정렬이 가운데이면 좌표가 텍스트의 중간
정렬이 오른쪽이면 좌표가 텍스트의 마지막이됩니다.

그리고 기울어진 텍스트 그리기 블록이 있습니다.
이것은 텍스트를 그릴 때 회전을 시켜서 그립니다.

각도는 위의 사진처럼 보통일때가 0도 기준이도, 반시계 방향으로 각도가 증가합니다.

5-7. 배경 픽셀 색상 가져오기 & 픽셀 색상 가져오기

배경 픽셀 색상은 해당 좌표의 캔버스 자체의 색을 가져옵니다.
즉, 해당 좌표에 공이나 이미지 스프라이트 컴포넌트가 겹쳐져있어도, 그것들은 무시하고, 그 밑에 있는 실제 캔버스 컴포넌트의 색을 가져옵니다.

이건 위의 블록과는 조금 다릅니다.
이 블록은 터치한 지점에 공이나 이미지 스프라이트 컴포넌트가 있다면 가장 위에 있는 컴포넌트의 색을 가져옵니다.
간단히 설명하면 해당 좌표에서 사용자가 실제로 보는 색을 가져온다는 뜻입니다.

댓글

제목과 URL을 복사했습니다