텍스트 Outline 효과

728x90

텍스트에 Outline 효과를 부여하는 다양한 방법

1. 텍스트 출력 시작 좌표를 이동하는 방법

for (int x = -m_nOutlineWidth; x <= m_nOutlineWidth; ++x)
for (int y = -m_nOutlineWidth; y <= m_nOutlineWidth; ++y)
pDC->TextOut(m_ptTextOut.x + x, m_ptTextOut.y + y, m_strText, m_strText.GetLength());
pDC->SetTextColor(RGB(255,255,255));
pDC->TextOut(m_ptTextOut.x, m_ptTextOut.y, m_strText, m_strText.GetLength());

원래의 텍스트를 출력하고자 하는 좌표값은 m_ptTextOut 이다.
m_nOutlineWidth 가 외곽선의 두께를 의미하는데,
두께만큼 텍스트 출력좌표를 이동해가면서 텍스트를 그린 후에
흰색으로 텍스트 색상을 변경한 후 원래 텍스트 출력 좌표에 텍스트를 출력하면 다음과 같은 결과가 나타난다.

2. GDI의 Path 오브젝트를 활용

pDC->BeginPath();
pDC->TextOut(m_ptTextOut.x, m_ptTextOut.y, m_strText, m_strText.GetLength());
pDC->EndPath();

CPen penOutline;
penOutline.CreatePen(PS_SOLID, m_nOutlineWidth, m_colorText);

CPen* pOldPen = pDC->SelectObject(&penOutline);
pDC->StrokePath();
pDC->SelectObject(pOldPen);

pDC->SetTextColor(RGB(255,255,255));

pDC->TextOut(m_ptTextOut.x, m_ptTextOut.y, m_strText, m_strText.GetLength());

CDC 클래스의 BeginPath 함수를 호출하여 Path 저장을 시작하여 텍스트를 출력한다.
EndPath 호출로 Path 저장을 완료하면 폰트의 외곽선이 Path에 저장된다.
적절한 두께의 Pen 오브젝트를 선택하여 StrokePath 함수로 Path를 그린 후
흰색으로 텍스트 색상을 변경하여 원래의 텍스트를 출력한다.
그 결과는 다음과 같다.

3. GDI+ 의 GraphicsPath 를 활용
참조 : http://support.microsoft.com/kb/307208

Graphics g(pDC->GetSafeHdc());

g.SetTextRenderingHint(TextRenderingHintAntiAlias);
g.SetSmoothingMode(SmoothingModeAntiAlias);

FontFamily fontFamily(m_strFamilyName);
double fontSize = /*20.0 **/ m_dFontPoint;
const StringFormat* pStringFormat = StringFormat::GenericTypographic(); // !!!
Color colorText;
colorText.SetFromCOLORREF(m_colorText);

GraphicsPath path;
path.AddString(m_strText, m_strText.GetLength(),
&fontFamily,
FontStyleRegular,
fontSize,
PointF(m_ptTextOut.x, m_ptTextOut.y),
pStringFormat);

Pen pen(colorText, m_nOutlineWidth);
g.DrawPath(&pen, &path);

pDC->SetTextColor(RGB(255,255,255));

pDC->TextOut(m_ptTextOut.x, m_ptTextOut.y, m_strText, m_strText.GetLength());

GDI의 Path 를 사용하는 원리와 동일하다.
다만 GDI+ 의 객체를 사용하는 방법을 알아야 한다.
중요한 점은 StringFormat::GenericTypographic() 을 사용하는 부분이다.
우선 결과부터 확인해 보도록 하자.

GDI+에서는 Path를 따라서 그리는 경우에 AntiAliasing 효과를 줄 수 있으므로 훨씬 깔끔한 외곽선 효과가 나타날 수 있다.
앞에서 언급한 StringFormat::GenericTypographic() 을 사용하면 GDI에서 출력하는 글자의 폭과 GDI+에서 출력하는 글자의 폭을 동일시할 수 있게 된다.

예제 프로젝트

invalid-file

4. GDI에서 Path를 구하여 GDI+의 Path에 적용하는 방법
이 방법의 필요성은 다음과 같은 이유때문이다.
(1) GDI와 GDI+를 함께 사용해야 하는 경우
(2) AntiAliasing 효과를 적용시키기 위해서
우선 코드를 살펴보도록 하자(조금 길다).

pDC->BeginPath();
pDC->TextOut(m_ptTextOut.x, m_ptTextOut.y, m_strText, m_strText.GetLength());
pDC->EndPath();

int nNumPts = pDC->GetPath(NULL, NULL, 0);
LPPOINT lpPoints = NULL;
LPBYTE lpTypes = NULL;

lpPoints = new POINT[nNumPts];
lpTypes = new BYTE[nNumPts];

nNumPts = pDC->GetPath(lpPoints, lpTypes, nNumPts);

Graphics g(pDC->GetSafeHdc());

g.SetTextRenderingHint(TextRenderingHintAntiAlias);
g.SetSmoothingMode(SmoothingModeAntiAlias);

GraphicsPath path;

Point lastPoint;
std::vector<Point> vecPoint;
for (int i = 0; i < nNumPts; ++i)
{
Point point(lpPoints[i].x, lpPoints[i].y);

switch (lpTypes[i])
{
case PT_MOVETO:
lastPoint = point;
if (i > 0)
path.CloseFigure();
path.StartFigure();
break;
case PT_LINETO:
path.AddLine(lastPoint, point);
lastPoint = point;
break;
case PT_BEZIERTO:
if (vecPoint.empty())
{
vecPoint.push_back(lastPoint);
}
if (vecPoint.size() < 4)
{
vecPoint.push_back(point);
}
if (4 == vecPoint.size())
{
path.AddBezier(vecPoint[0], vecPoint[1], vecPoint[2], vecPoint[3]);

vecPoint.clear();
lastPoint = point;
}
break;
case PT_CLOSEFIGURE:
path.CloseFigure();
break;
}
}
path.CloseFigure();

delete[] lpPoints;
delete[] lpTypes;

Color colorText;
colorText.SetFromCOLORREF(m_colorText);
Pen pen(colorText, m_nOutlineWidth);
g.DrawPath(&pen, &path);

핵심 원리는 이렇다.
GDI에서 Path를 구한다.
Path를 이루는 각 포인트를 GDI+의 Path에 적용시킨다.

결과 화면은 다음과 같다.