2-2-4.텍스트 측정

문자열을 특정 좌표에 출력하면 해당 좌표에서 시작하여 오른쪽으로 죽 출력된다. 이때 끝 좌표가 어디쯤 될지는 알 수 없다. 폰트의 크기와 글자의 개수를 안다고 해서 이 둘을 곱해서 문자열의 길이를 알기는 어렵다. 왜냐하면 대부분이 폰트는 가변폭이어서 같은 크기라도 i와 M의 폭이 다르므로 단순한 곱셈으로는 정확한 폭 계산이 불가능하다.

한글의 경우는 문자폭이 일정해서 곱셈으로 어느 정도 근사치를 구할 수 있지만 폰트에 따라 달라질 수도 있고 실수 절사의 문제가 있어 역시 정확하지 않다. 문자열의 정확한 폭을 구하려면 현재 설정된 폰트와 문자열을 구성하는 각 문자에 대한 정보가 필요하다. 이런 모든 것을 고려하여 문자열의 폭을 계산하는 메서드가 제공된다.

measureText(text).width

measureText 메서드는 컨텍스트에 현재 설정된 폰트 정보를 참조하여 text 문자열의 크기 정보를 구하며 그 결과를 TextMetrics 객체로 리턴한다. TextMetrics 객체에는 문자열의 크기에 관한 여러 가지 정보가 들어 있지만 통상 폭이 가장 중요하므로 이 객체를 따로 변수에 대입받을 필요없이 리턴된 값의 width 속성을 바로 읽는다. 폭의 단위는 물론 픽셀이다.

문자열의 폭이 필요한 대표적인 경우는 여러 개의 문자열을 이어서 출력해야 할 때이다. 앞 문자열이 끝나는 지점에 다음 문자열을 출력해야 하므로 실시간으로 폭을 구해서 사용해야 한다. 각 문자열의 폰트 설정이 달라도 measureText가 폰트 정보까지 참조하여 폭을 구해 주므로 연이어 출력할 수 있다.

measuretext.html

function draw() {

var x = 10;

var text = "큰글자";

ctx.font="50px 궁서";

ctx.fillStyle = "blue";

ctx.fillText(text, x, 100);

x += ctx.measureText(text).width;

ctx.font="30px 궁서";

ctx.fillStyle = "green";

text = "중간글자";

ctx.fillText(text, x, 100);

x += ctx.measureText(text).width;

ctx.font="15px 궁서";

ctx.fillStyle = "red";

text = "작은글자";

ctx.fillText(text, x, 100);

}

x는 10에서 시작하여 세 개의 문자열을 출력한다. 50픽셀 크기의 폰트로 파란색의 "큰글자" 문자열을 출력하고 이 문자열의 폭만큼 x를 오른쪽으로 이동시켰다. x는 "큰글자"문자열 출력이 끝난 지점을 가리키고 있을 것이다. 이 위치에 다음 문자를 출력하면 정확하게 이어서 출력된다. "큰글자" 바로 오른쪽에 30픽셀 크기의 초록색으로 "중간글자" 문자열을 출력했다.

마찬가지로 "중간글자" 문자열의 폭을 x에 더해 끝 위치를 구하고 이 위치에 "작은글자" 문자열을 계속 출력한다. 이런 식으로 하면 폰트의 속성이 아무리 바뀌어도, 문자열의 구성 문자가 아무리 다양해도 계속 이어서 출력할 수 있다.

워드 프로세서처럼 서식이 다른 문자열을 출력할 때는 텍스트 측정이 꼭 필요하다. 또한 캐럿이나 선택 블록을 표시할 때도 문자열의 폭을 알아야 캐럿의 위치와 블록의 영역을 확정할 수 있다.