잠깐만요

캔버스의 좌표와 공의 위치

캔버스에서 특정 지점의 위치는 X와 Y의 좌푯값으로 나타낼 수 있습니다. 좌푯값은 캔버스의 왼쪽 상단 꼭짓점에서 (0, 0)이 되고, 오른쪽으로 갈수록 X 값이 커지고 아래로 내려올수록 Y 값이 커집니다.

‘블록’ 화면으로 이동하여 다음 그림과 같이 블록을 구성한 후 스마트폰에 연결하고 캔버스 이곳저곳을 터치해 보세요. ‘레이블1’에 출력되는 값을 살펴보면 캔버스의 좌표 체계를 이해할 수 있을 것입니다.

캔버스에 배치된 공의 X, Y 값은 공을 감싸는 가상의 정사각형이 있다고 가정했을 때 이 정사각형의 왼쪽 상단 꼭짓점 좌표를 의미합니다. 예를 들어, 공을 캔버스의 중앙에 두기 위해 좌표를 (160, 160)으로 설정했다면 공의 중심이 캔버스 중앙에 위치하는 것이 아니라 공의 왼쪽 상단 꼭짓점이 캔버스 중앙에 위치합니다. 이 상태에서 공의 중심과 캔버스의 중앙을 일치시키려면 공의 위치를 공의 반지름 크기인 10만큼씩 왼쪽과 위쪽으로 이동시켜야 합니다. 즉, X 값에서 10을 빼서 공을 왼쪽으로 이동시키고 Y 값에서 10을 빼서 공을 위로 이동시키면 공의 좌표는 (150, 150)이 되고 공의 중심과 캔버스의 중앙이 같아집니다.