Click here to Skip to main content
15,867,568 members
Articles / Programming Languages / C++
Article

Draw oblique / slant text strings

Rate me:
Please Sign up or sign in to vote.
4.73/5 (8 votes)
25 Apr 20073 min read 56.9K   559   24   9
This article shows how to draw oblique/slant text string

Introduction

The function provided here can be used to draw a text string with an oblique or slant angle. Such text outputs are useful in isometric or perspective 3D views to make the text strings look like in their 3D space. An example is shown in the following picture:

Screenshot - obluqie1.jpg

Background

Windows GDI function TextOut() does not allow a text slant angle. To draw such slanted strings, we need to set a transformation using SetWorldTransform(). Windows drawing function will then take care of the shearing and rotation of the output. This procedure is incorporated into a new function similar to Windows TextOut() function:

C++
void ObliqueTextOut( CDC *dc, int oblique, int x,int y,const CString &Text )

This function has the same arguments as Windows TextOut() function with an additional argument, oblique, to specify the text slant angle. The function can be placed where TextOut() is normally used.

Using the code

Insert the function source code into your source code file. Call the function at places where you would normally call Windows TextOut() function. Remember to select the font, set the text background mode, color and background color etc, as you would normally do before calling TextOut().

Angle oblique is positive if the text slants forward(to the right) and negative if it slants backwards(to the left). The oblique angle, s, in the figure below is positive. The angle is in 1/10th degrees. Therefore, if the text slants forward 15 degrees, oblique=150.

Points of Interest

The key to the question is to set up the transformation in DC. Function SetWorldTransform() needs an XFORM structure for the transformation. Therefore, we need to prepare the XFORM structure before calling SetWorldTransform( ). XFORM has 6 member data. They are eM11, eM21, eM12, eM22, eDx, eDx. They are defined as:

plain
X = eM11 * x + eM21 * y + eDx
Y = eM12 * x + 2M22 * y + eDy

where (x,y) are the World coordinates and (X,Y) are the Paper space coordinates.

In the figure below, x,y are the World space axes. The string will always be drawing at (0,0) and horizontally in the world space. xs,ys are the Sheared space axes. The transformation from World to the Sheared space is:

plain
xs = x - y * tan(s)
ys = y

where s is the slant or oblique angle.

Screenshot - oblique3.jpg

The Paper space is noted as X,Y. From the Sheared space to Paper space, the transformation is a rotation(angle r) and translation(Xo,Yo).

plain
X = Xo + xs * cos(r) + ys * sin(r)
Y = Yo + ys * cos(r) - xs * sin(r)

Where (Xo,Yo) are simply the text insertion point in Paper space. Substitute (xs,ys) into the above, we get:

plain
X = cos(r) * x + (sin(r)-tan(s)*cos(r)) * y + Xo
Y = -sin(r) * x + (cos(r)+tan(s)*sin(r)) * y + Yo

Compare this to the XFORM structure, it is obvious that:

plain
eM11 = cos(r)
eM21 = sin(r) - tan(s) * cos(r)
eM12 = -sin(r)
eM22 = cos(r) + tan(s) * sin(r)
eDx = Xo
eDy = Yo

The above is translated into function code(dc is the input device context):

C++
XFORM xForm;
xForm.eDx = (float) x;
xForm.eDy = (float) y;
xForm.eM11 = (float) cos(txtRotate);
xForm.eM21 = (float) (sin(txtRotate) - tan(txtOblique)*cos(txtRotate));
xForm.eM12 = (float) -sin(txtRotate);
xForm.eM22 = (float) (cos(txtRotate) + tan(txtOblique)*sin(txtRotate));
SetGraphicsMode( dc->m_hDC, GM_ADVANCED );
SetWorldTransform( dc->m_hDC, &xForm );

The call to SetGraphicsMode() is needed. Otherwise, function SetWorldTranform() will have no effect. Since now we are drawing in World space, we need to adjust the font's rotation(lfEscapement) to be horizontal and the character orientation(lfOrintation) to be from the World X-axis.

C++
LOGFONT lgf;
dc->GetCurrentFont()->GetLogFont( &lgf );
...
lgf.lfOrientation -= lgf.lfEscapement;
lgf.lfEscapement = 0;
CFont horFont;
horFont.CreateFontIndirect( &lgf );
CFont *OldFont = dc->SelectObject( &horFont );

Now, we can call:

C++
dc->TextOut( 0,0, Text );

The work is done. But before returning, we need to restore the graphics mode and font:

C++
ModifyWorldTransform( dc->m_hDC, &xForm, MWT_IDENTITY );
SetGraphicsMode( dc->m_hDC, GM_COMPATIBLE );
dc->SelectObject( OldFont );

History

  • April 19, 2007: Version 1 by manipulating bitmaps
  • April 25, 2007: Version 2 - a complete rewrite following Goran Mitrovics' suggestion. It is simpler and the output is of better quality. Many thanks, Goran!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionit is PLAGIAT? Pin
ko__marek17-Mar-10 12:39
ko__marek17-Mar-10 12:39 
GeneralBeginPath/EndPath/... Pin
c2j223-Apr-07 20:39
c2j223-Apr-07 20:39 
GeneralBeginPath/EndPath/... Pin
Andrew Qu23-Apr-07 23:02
Andrew Qu23-Apr-07 23:02 
GeneralRe: BeginPath/EndPath/... Pin
c2j223-Apr-07 23:23
c2j223-Apr-07 23:23 
GeneralRe: BeginPath/EndPath/... Pin
Andrew Qu23-Apr-07 23:45
Andrew Qu23-Apr-07 23:45 
Question? Pin
Goran Mitrovic23-Apr-07 0:24
Goran Mitrovic23-Apr-07 0:24 
AnswerUsing SetWorldTransform() Pin
Andrew Qu23-Apr-07 3:21
Andrew Qu23-Apr-07 3:21 
GeneralRe: Using SetWorldTransform() Pin
Goran Mitrovic23-Apr-07 3:28
Goran Mitrovic23-Apr-07 3:28 
AnswerRe: Using SetWorldTransform() Pin
Andrew Qu23-Apr-07 22:57
Andrew Qu23-Apr-07 22:57 
Hi Goran,
Thanks for the link. I did not read the example carefully. It can set up a shear transformation. in that case, it should be easier. I will implement this way and make an update. Thanks!
Andrew

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.