5.트랜스폼
가.외곽선 변형
외곽선 폰트의 글리프는 최종 장치로 바로 출력되는 것이 아니라 래스터라이징 과정을 거쳐 비트맵으로 변환된 후 출력된다. 래스터라이징은 수학 연산을 적용하여 EM의 좌표들을 실제 장치의 좌표로 변환하는 과정인데 이 중간 과정에서 여러 가지 변형을 시도하여 글리프의 모양을 원하는대로 조작할 수 있다. 어떤 처리든 중간 과정이 있으면 조작할 수 있는 기회가 부여되며 그래서 일부러 중간 과정을 삽입하기도 한다.
좌표 조작은 외곽선 폰트에서만 가능하며 비트맵 폰트는 래스터라이징이 완료된 폰트이므로 중간 과정이 없어 이런 조작을 할 수 없다. 엄청나게 복잡한 수식을 동원하지 않더라도 단순히 곱하고 더하기만 해도 꽤 쏠쏠한 효과를 낼 수 있다. FreeType은 다음과 같은 좌표 조작 함수를 제공한다.
FT_EXPORT( void ) FT_Outline_Translate( const FT_Outline* outline, FT_Pos xOffset, FT_Pos yOffset );
FT_EXPORT( void ) FT_Outline_Transform( const FT_Outline* outline, const FT_Matrix* matrix );
Translate는 외곽선 폰트의 좌표에 xOffset, yOffset을 더해 글리프를 수평 이동시킨다. 조금 더 아래쪽으로 글꼴을 옮기고 싶다거나 위첨자, 아래첨자 처럼 베이스를 조작하고 싶을 때 이 함수를 사용한다. 한글, 영문, 일어 등의 여러 언어가 섞여 있을 때 베이스가 맞지 않는 경우가 가끔 있는데 이럴 때 베이스를 맞추기 위해 필요하다. 함수가 직관적이고 효과도 상식적이므로 이 함수에 대해서는 따로 예제를 만들어 볼 필요가 없을 것이다.
Transform은 외곽선 좌표에 행렬식을 곱해 완전히 새로운 좌표로 이동시킨다. Translate가 덧셈, 뺄셈을 하는데 비해 Transform은 곱셈, 나눗셈을 한다는 점에서 활용도가 더 높다. 같은 방향이 아닌 반대축의 값을 곱한 후 더할 수 있어서 다양한 효과를 낼 수 있다. 인수로 전달받는 FT_Matrix는 다음과 같이 선언되어 있다.
typedef struct FT_Matrix_
{
FT_Fixed xx, xy;
FT_Fixed yx, yy;
} FT_Matrix;
4개의 멤버를 가지는데 각 멤버는 행렬식의 계수로 사용된다. 16.16 포맷이므로 소수점 이하의 정밀한 값도 표현할 수 있다. 이 행렬에 의해 원래 좌표 (x, y)에 대해 새로운 좌표 (x', y')가 계산된다. 행렬식을 방정식으로 풀어 보면 다음과 같다.
x' = x*xx + y*xy
y' = x*yx + y*yy
원래의 x, y에 행렬식의 계수를 곱하여 새 좌표를 결정하는데 계수가 어떤 값을 가지는가에 따라 새 좌표가 전혀 다른 곳으로 결정됨으로써 변환 효과가 발생한다. 이런 류의 행렬식은 GDI에도 있고 GDI+에도 있어서 이미 익숙할 것이므로 상세한 수학적 설명은 생략하고 예제를 바로 만들어 보도록 하자.
|
예 제 : Transform |
#include <math.h>
void DrawGlyph(HDC hdc,int bx, int by, FT_Face face)
{
int x, y;
int Color;
int width, height;
width=face->glyph->bitmap.width;
height=face->glyph->bitmap.rows;
for (y=0;y<height;y++) {
for (x=0;x<width;x++) {
Color=255-face->glyph->bitmap.buffer[y*width+x];
if (Color != 255) {
SetPixelV(hdc,bx+face->glyph->bitmap_left+x,
by-face->glyph->bitmap_top+y,RGB(Color,Color,Color));
}
}
}
}
void OnPaint(HDC hdc)
{
FT_Face face;
unsigned index;
FT_New_Face(library,"c:\\windows\\fonts\\batang.ttc",2,&face);
FT_Set_Char_Size(face, 64 * 64, 0,
GetDeviceCaps(hdc,LOGPIXELSX), GetDeviceCaps(hdc,LOGPIXELSY));
index = FT_Get_Char_Index(face,L'한');
// 단위 행렬로 정의
FT_Matrix matrix = { 0x10000,0x00000,0x00000,0x10000 };
FT_Load_Glyph(face,index,FT_LOAD_DEFAULT | FT_LOAD_NO_BITMAP);
FT_Outline_Transform( &face->glyph->outline, &matrix );
FT_Render_Glyph(face->glyph, FT_RENDER_MODE_NORMAL);
DrawGlyph(hdc,200,200,face);
FT_Done_Face(face);
}
페이스에서 글자 하나를 읽어 출력하는 코드인데 여러 번 실습해 봤으므로 이제는 아주 친숙하게 느껴질 것이다. 페이스 로드하고 글리프의 순서값 찾아 로드한 후 비트맵으로 랜더링하여 화면으로 출력했다. 다만 랜더링을 하기 전에 Transform 함수 호출문이 들어갔다는 점만 다른데 이 함수로 전달된 행렬에 따라 변환 효과가 나타난다.
위 예제에서 전달된 행렬은 대각선 방향만 1인 단위 행렬이다. 행렬의 멤버들은 16.16 포맷이므로 65536, 16진수로 0x10000이 곧 1을 의미한다. 방정식으로 풀어보면 x'=x, y'=y가 되어 결국 원래 좌표를 그대로 유지하는 셈이다. 단위 행렬이란 덧셈의 0, 곱셈의 1처럼 연산해 봐야 원래값이 되는 기본값이다. 즉, 이 예제의 경우 Transform을 하지 않은 것과 효과가 같아서 글리프가 지정한 위치에 지정한 크기대로 나타난다.
그러나 Transform 호출 이전에 행렬을 조작하면 외곽선의 좌표가 행렬식대로 조작되어 출력 결과가 바뀐다. 행렬 선언 직후에 다음 대입문을 작성해 보자.
matrix.xx = 0x20000;
matrix.yy = 0x20000;
xx와 yy를 2.0으로 수정했으므로 새 좌표는 다음 방정식에 의해 결정된다.
x' = 2 * x;
y' = 2 * y;
원래의 외곽선 좌표에 모두 2가 곱해지므로 글리프가 2배로 커진다. (10,10)은 (20,20)으로 가고 (100,200)은 (200,400)으로 이동한다. 래스터라이징하기 전의 외곽선 좌표를 조작한 것이므로 결과로 만들어진 비트맵에 계단 현상 따위는 발생하지 않으며 깔끔하게 출력된다.
64포인트의 글리프를 2배 확대했으므로 128포인트로 출력한 것과 비슷하다. 그러나 힌팅이 트랜스폼과 별도로 수행되기 때문에 완전히 같지는 않으며 아주 미세하게 틀린 점이 있다. 다음은 한쪽 방향만 확대해 보자.
matrix.xx = 0x50000;
matrix.yy = 0x10000;
x'만 5배 되므로 수평으로 다섯배 뚱뚱해진 글자가 출력될 것이다. 글자에 장평을 적용했다고 보면 된다.
행렬의 멤버가 소수점 이하도 표현할 수 있으므로 1.0보다 작은 값을 주면 축소도 가능하다.
matrix.xx = 0x08000;
0x8000은 십진수 32768이며 16.16 포맷으로는 0.5에 해당한다. 수평 좌표를 절반으로 50% 세일해서 적용하므로 홀쭉한 글자가 출력될 것이다. xx가 작아질 수록 글리프는 더욱 더 날씬하게 출력된다.
음수도 물론 적용할 수 있다. matrix.xx = -0x10000;으로 대입하면 수평 좌표의 부호가 바뀌므로 글자가 거울에 반사된 모양으로 출력된다. yy의 부호를 뒤집으면 수직으로 반사된 글자도 물론 만들 수 있다.
다음은 조금 더 복잡한 예를 보자. 원래 좌표의 반대축을 연산에 적용하면 좀 더 극적인 효과가 나타난다.
matrix.xy = 0x06000;
xy만 0x6000으로 대입했는데 실수로 바꾸면 0.375가 된다. 이 값을 방정식에 적용하면 다음 두 개의 수식이 생성된다.
x' = x + 0.375 * y
y' = y
y축은 원래값을 그대로 가지되 x축은 y에 일정한 값을 곱해 베이스라인에서 위로 올라갈수록 원래값보다 더 커진다. 수직 위치에 따라 x의 새 좌표가 일정 비율로 이동함으로써 기울어진 문자가 만들어진다. 0x6000이 커지면 기울어지는 정도가 더 심해진다. 보통 모양의 페이스에 이탤릭 스타일을 줄 때 이 방법을 사용한다.
고수준 문자열 출력 함수에 비해 기울어지는 정도나 방향을 정밀하게 조정할 수 있다는 점이 다르다. 다음은 가장 복잡한 회전의 예를 보자. 회전은 선형적인 변환이 아니어서 삼각함수를 동원해야 한다.
double angle=(45.0/360)*3.14159*2;
matrix.xx = (FT_Fixed)(cos(angle)*0x10000);
matrix.xy = (FT_Fixed)(-sin(angle)*0x10000);
matrix.yx = (FT_Fixed)(sin(angle)*0x10000);
matrix.yy = (FT_Fixed)(cos(angle)*0x10000);
원하는 각도만큼 sin, cos을 적용하면 이 각도만큼 기울어진 형태로 글리프가 출력된다. sin, cos 삼각함수는 각도가 아닌 라디안을 요구하므로 각도를 라디안으로 바꿔서 전달했다.
갑자기 삼각함수가 등장해서 좀 당황스러울지 모르겠는데 위 수식은 중학교 수학 수준에서도 설명 가능한 쉬운 수식이다.
나.스타일 적용
Transform 함수를 사용하면 이동이나 확대, 기울이기 등의 변형을 할 수 있다. 그러나 이 함수는 좌표만 조작할 수 있으므로 좌표와 직접적인 연관이 없는 스타일을 적용하는데는 한계가 있다. 대표적인 예가 획의 굵기를 변형하는 것이다. 트루타입의 획은 폐곡선으로 정의되어 있어 바깥쪽으로만 좌표를 이동시켜야 하는데 어느쪽이 바깥쪽이고 어느쪽이 안쪽인지를 좌표만으로는 판별할 수 없기 때문이다. 그래서 FreeType은 굵기를 조정하는 별도의 변환 함수를 제공한다.
FT_EXPORT( FT_Error ) FT_Outline_Embolden( FT_Outline* outline, FT_Pos strength );
굵기에 적용할 강도값을 전달하면 이 강도만큼 획을 더 굵게 만들어준다. 강도값은 26.6포맷이므로 소수점 단위로 섬세하게 지정할 수 있으며 음수를 주어 더 가늘게 그리는 것도 가능하다. 간단하게 예제를 만들어 보자.
|
예 제 : ApplyStyle |
void DrawGlyph(HDC hdc,int bx, int by, FT_Face face)
{
int x, y;
int Color;
int width, height;
width=face->glyph->bitmap.width;
height=face->glyph->bitmap.rows;
for (y=0;y<height;y++) {
for (x=0;x<width;x++) {
Color=255-face->glyph->bitmap.buffer[y*width+x];
if (Color != 255) {
SetPixelV(hdc,bx+face->glyph->bitmap_left+x,
by-face->glyph->bitmap_top+y,RGB(Color,Color,Color));
}
}
}
}
void OnPaint(HDC hdc)
{
FT_Face face;
unsigned index;
FT_New_Face(library,"c:\\windows\\fonts\\batang.ttc",2,&face);
FT_Set_Char_Size(face, 128 * 64, 0,
GetDeviceCaps(hdc,LOGPIXELSX), GetDeviceCaps(hdc,LOGPIXELSY));
index = FT_Get_Char_Index(face,L'가');
// 보통 모양
FT_Load_Glyph(face,index,FT_LOAD_DEFAULT | FT_LOAD_NO_BITMAP);
FT_Render_Glyph(face->glyph, FT_RENDER_MODE_NORMAL);
DrawGlyph(hdc,0,200,face);
// 볼드 적용 - 5% 더 두껍게
FT_Load_Glyph(face,index,FT_LOAD_DEFAULT | FT_LOAD_NO_BITMAP);
FT_Outline_Embolden( &face->glyph->outline, (face->size->metrics.x_ppem*5/100)*64);
FT_Render_Glyph(face->glyph, FT_RENDER_MODE_NORMAL);
DrawGlyph(hdc,200,200,face);
// 이탤릭 적용 - 12도 기울임
FT_Load_Glyph(face,index,FT_LOAD_DEFAULT | FT_LOAD_NO_BITMAP);
FT_Matrix transform = {0x10000, 0x06000, 0x00000, 0x10000};
FT_Outline_Transform( &face->glyph->outline, &transform );
FT_Render_Glyph(face->glyph, FT_RENDER_MODE_NORMAL);
DrawGlyph(hdc,400,200,face);
// 밑줄 적용
FT_Load_Glyph(face,index,FT_LOAD_DEFAULT | FT_LOAD_NO_BITMAP);
FT_Render_Glyph(face->glyph, FT_RENDER_MODE_NORMAL);
DrawGlyph(hdc,600,200,face);
int underpos=face->underline_position*face->size->metrics.x_ppem/face->units_per_EM;
int underthick=face->underline_thickness*face->size->metrics.x_ppem/face->units_per_EM;
HPEN hPen,hOldPen;
hPen=CreatePen(PS_SOLID,underthick,RGB(0,0,255));
hOldPen=(HPEN)SelectObject(hdc,hPen);
MoveToEx(hdc,600+(face->glyph->bitmap_left),200-underpos,NULL);
LineTo(hdc,600+(face->glyph->metrics.width >> 6),200-underpos);
FT_Done_Face(face);
}
128포인트 크기로 "가" 글리프를 출력하되 보통 모양, 볼드, 이탤릭, 밑줄을 적용해 보았다. 실행 결과는 다음과 같다.
밑줄은 직접 선을 그어야 한다. face에 밑줄의 위치와 굵기에 대한 메트릭스가 있으므로 이 값을 읽어 계산된 위치에 선만 그으면 된다. 밑줄의 위치와 굵기는 폰트 유닛으로 기록되어 있으므로 픽셀 단위로 바꾸어 적용했다. 밑줄은 통상 글자의 색상과 같은 색으로 긋는 것이 보통이지만 예제에서는 글리프와 별도로 그려진 것임을 강조하기 위해 파란색으로 출력해 보았다.
고수준 텍스트 출력 함수에서는 밑줄이 글자와 같이 출력되므로 마치 글리프에 밑줄이 미리 포함된 것처럼 보이지만 저수준에서는 밑줄도 직접 그어야 한다. 왜 이렇게 되어 있는가 하면 밑줄이란 글리프 하나에 소속된다기보다는 주변의 텍스트에 한꺼번에 적용되는 스타일이기 때문이다. 높이가 다른 문자들이나 자간이 벌어진 상태에서도 동일한 굵기로 끊어짐없이 그어야 하므로 글리프에 소속되어서는 안된다.
이 예제의 코드를 잘 응용하면 고수준 함수에서는 구현할 수 없는 커스텀 스타일을 적용할 수도 있다. 굵기의 정도나 기울임 각도를 원하는대로 조정할 수 있으며 밑줄의 색상이나 개수, 심지어 밑줄의 모양까지도 마음대로 그릴 수 있다. 이중 밑줄은 물론이고 물결치는 모양의 밑줄도 가능하다. 역시 저수준이라 응용의 묘미가 있다. 그러나 안타깝게도 FreeType의 Bold 처리에 약간의 문제가 있음이 발견되었다. "가"처럼 간단한 글자는 잘 동작하지만 "한"이나 "영"처럼 조금 복잡한 글자는 결과가 조금 이상하다.
ㅎ의 동그라미가 굵어진게 아니라 오히려 얇아져 버렸다. 이 문제는 폐곡선의 안쪽과 바깥쪽을 오판하여 생긴 것 같다. 페이스에 문제가 있거나 아니면 FreeType에 문제가 있거나 둘중 하나인데 아무래도 FreeType쪽의 버그가 아닌가 생각된다. 영문 폰트는 모두 정상 동작하며 한글 폰트도 바탕과 굴림은 제대로 되지만 궁서와 돋움은 문제가 있었다.
역시 국산 라이브러리가 아니다 보니 한글 폰트에 대해서는 제대로 테스트가 되지 못한 것 같다. 예제 작성자가 잠시 깜박 졸아서 뭔가 꼭 필요한 처리를 빼 먹었을 가능성도 있기는 하지만 코드가 워낙 간단해 확률은 높지 않다. 어떤 라이브러리나 사소한 버그는 있기 마련이므로 버그를 피해 사용하는 수밖에 없다. FreeType의 버전이 올라가면 해결될 것이다.
다.기울어진 문자열
다음 예제는 변형의 또 다른 예로 개별 글리프가 아닌 문자열을 통째로 기울여서 출력한다. FreeType 튜토리얼에 있는 예제를 재구성한 것인데 난이도에 비해 실용성은 떨어지므로 구경만 해 보자.
|
예 제 : SkewString |
#include <math.h>
void OnPaint(HDC hdc)
{
FT_Face face;
TCHAR str[]=TEXT("Skew String");
int idx;
int x, y;
int Color;
int width, height;
FT_Matrix matrix;
FT_Vector pen;
pen.x=100*64;
pen.y=(600-300)*64;
FT_New_Face(library,"c:\\windows\\fonts\\times.ttf",0,&face);
FT_Set_Char_Size(face, 64 * 64, 0,
GetDeviceCaps(hdc,LOGPIXELSX), GetDeviceCaps(hdc,LOGPIXELSY));
double angle=(25.0/360)*3.14159*2;
matrix.xx = (FT_Fixed)(cos(angle)*0x10000);
matrix.xy = (FT_Fixed)(-sin(angle)*0x10000);
matrix.yx = (FT_Fixed)(sin(angle)*0x10000);
matrix.yy = (FT_Fixed)(cos(angle)*0x10000);
for (idx=0;idx<lstrlen(str);idx++) {
FT_Set_Transform(face,&matrix,&pen);
FT_Load_Char(face,str[idx],FT_LOAD_RENDER);
width=face->glyph->bitmap.width;
height=face->glyph->bitmap.rows;
for (y=0;y<height;y++) {
for (x=0;x<width;x++) {
Color=255-face->glyph->bitmap.buffer[y*width+x];
if (Color != 255) {
SetPixel(hdc,face->glyph->bitmap_left+x,
600-face->glyph->bitmap_top+y,RGB(Color,Color,Color));
}
}
}
pen.x += face->glyph->advance.x;
pen.y += face->glyph->advance.y;
}
FT_Done_Face(face);
}
FT_Set_Transofrm 함수는 글리프를 로드하기 전에 호출하며 글리프가 로드될 때 변형을 가한다. 글리프가 행렬식대로 변형되며 그 결과 advance 메트릭스도 같이 변경된다. 비스듬하게 기울어지면 진행폭도 바뀌는데 이런 계산을 같이 수행함으로써 연속적인 문자들을 같은 각도로 기울일 수 있는 것이다. 실행 결과는 다음과 같다.
뭔가 좀 색달라 보이기는 하지만 실용성은 거의 없다. 왜냐하면 이런 효과를 내고 싶을 때 쓸 수 있는 고수준의 다른 기법들이 많이 있기 때문이다. GDI+의 월드 좌표 변환 기능을 사용하면 일반적인 문자열을 출력해도 기울이지고 찌그러진 문자열을 얼마든지 표현할 수 있으며 훨씬 더 기능도 많을 뿐만 아니라 사용하기도 쉽다. 고수준에서 훌륭하게 제공되는 기능은 굳이 저수준을 동원할 필요가 없다.