4-1-1.이동 변환

캔버스의 좌표계는 좌상단을 원점으로 하며 수평은 오른쪽으로 증가하고 수직은 아래쪽으로 증가한다. 이른바 데카르트 좌표계라고 하며 디지털 환경에서는 일반적인 좌표계이다. 단위는 픽셀이며 오른쪽 끝과 아래쪽 끝 좌표는 캔버스의 크기에 의해 결정된다.

좌표계가 이렇게 되어 있으므로 (0,0)에 뭔가를 출력하면 좌상단에 출력되며 (100, 100) 좌표는 오른쪽으로 100픽셀, 아래쪽으로 100픽셀 떨어진 자리를 의미한다. 지금까지 우리는 이 좌표계에서 도형 및 이미지 출력 실습을 해 왔다.

변환이란 좌표계를 변형하여 출력물의 위치, 크기, 모양에 영향을 주는 기법이다. 똑같은 메서드를 호출하더라도 좌표 체계가 바뀌면 출력이 달라진다. 먼저 가장 단순한 이동 변환부터 알아 보자. 다음 메서드로 이동 변환을 지정한다.

translate(x, y)

인수로 전달한 x, y만큼 좌표계의 원점이 이동하며 이후의 출력문은 이동한 좌표계를 기준으로 한다.

translate.html

function draw() {

ctx.fillStyle="blue";

ctx.fillRect(50,50,30,30);

ctx.translate(50,50);

ctx.fillStyle="red";

ctx.fillRect(50,50,30,30);

}

아무런 변환없이 (50, 50) 좌표에 파란색 사각형을 출력했다. 이 사각형은 원점에서 (50, 50)만큼 떨어진 위치에 출력된다. 다음은 원점을 (50, 50)으로 이동한 후 똑같은 출력문으로 빨간색 시각형을 출력했다.

원점이 (50, 50)으로 옮겨졌으므로 겉보기 좌표는 (100, 100)인 것처럼 보인다. 변환을 하지 않고 (100, 100)에 출력한 것과 같다. 원점이 캔버스 안쪽으로 들어와 있는 상황에서는 음수 좌표를 사용할 수도 있다.

이동 변환을 사용하면 여러 개의 도형을 일정한 간격으로 배치하기 편리하다. 다음 예제는 50픽셀 간격으로 사각형을 배치한다.

translate2.html

function draw() {

ctx.fillStyle="blue";

for (var i = 0;i < 6;i++) {

ctx.fillRect(50, 50, 30, 30);

ctx.translate(50, 0);

}

}

fillRect 메서드는 항상 (50, 50) 좌표에 사각형을 그리지만 한번 그릴 때마다 원점을 50픽셀 오른쪽으로 이동시키므로 매번 출력할 때마다 사각형이 50만큼 오른쪽으로 이동한다. 변환은 호출할 때마다 누적적으로 적용된다. translate(50, 0)은 원점을 절대 위치 (50, 0)으로 옮기는 것이 아니라 현재 원점에서 +50만큼 이동시킨다는 뜻이다.

이동 변환을 하지 않고 좌표를 직접 계산해서 50, 100, 150, 200 식으로 사각형을 그릴 수도 있다. 그러나 일일이 암산해야 하므로 실수할 위험이 있으며 간격을 바꿀 때 모든 숫자를 한꺼번에 다 바꿔야 하므로 불편하다. 이동 변환은 translate의 인수만 바꾸면 간격을 원터치로 간편하게 수정할 수 있어 편리하고 안전하다.

캔버스의 중앙에 도형을 그리고 싶을 때 원점을 캔버스 중앙으로 옮겨 놓고 그린다. 다음 예제는 캔버스 중앙에 원을 그린다.

translate3.html

function draw() {

ctx.fillStyle="blue";

ctx.translate(canvas.width/2, canvas.height/2);

ctx.beginPath();

ctx.arc(0, 0, 80, 0, 2*Math.PI);

ctx.fill();

}

translate 메서드로 원점을 캔버스 중앙 좌표로 지정했다. 이 상태에서 (0, 0)을 중심으로 하는 원을 그리면 정확하게 캔버스 중앙이다.

그려야 할 도형이 원 하나뿐이라면 원점을 옮기는 대신 원의 중심을 캔버스 중앙으로 지정해도 결과는 같다. 그러나 수학 좌표계를 그리고 그 위에 일차 함수 그래프나 포물선을 그리려면 좌표를 일일이 조정하는 것보다 아예 원점을 옮겨 놓고 작업하는 것이 훨씬 편리하다.