📄 step2.html
字号:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div.pre
{
font-family: monospace;
text-align: left;
white-space: pre;
color: blue;
}
div.example
{
font-family: monospace;
text-align: left;
white-space: pre;
color: purple;
}
span.comment
{
color: gray;
}
</style>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author"
content="David Turner">
<title>FreeType 2 Tutorial</title>
</head>
<body text="#000000"
bgcolor="#FFFFFF"
link="#0000EF"
vlink="#51188E"
alink="#FF0000">
<h1 align=center>
FreeType 2 Tutorial<br>
Step 2 — managing glyphs
</h1>
<h3 align=center>
© 2003 David Turner
(<a href="mailto:david@freetype.org">david@freetype.org</a>)<br>
© 2003 The FreeType Development Team
(<a href="http://www.freetype.org">www.freetype.org</a>)
</h3>
<center>
<table width="70%">
<tr><td>
<hr>
<h2>
Introduction
</h2>
<p>This is the second section of the FreeType 2 tutorial. It describes
how to</p>
<ul>
<li>retrieve glyph metrics</li>
<li>easily manage glyph images</li>
<li>retrieve global metrics (including kerning)</li>
<li>render a simple string of text, with kerning</li>
<li>render a centered string of text (with kerning)</li>
<li>render a transformed string of text (with centering)</li>
<li>access metrics in design font units when needed,
and how to scale them to device space</li>
</ul>
<hr>
<h3>
1. Glyph metrics
</h3>
<p>Glyph metrics are, as their name suggests, certain distances
associated with each glyph in order to describe how to use it to layout
text.</p>
<p>There are usually two sets of metrics for a single glyph: Those used
to layout the glyph in horizontal text layouts (Latin, Cyrillic, Arabic,
Hebrew, etc.), and those used to layout the glyph in vertical text
layouts (Chinese, Japanese, Korean, etc.).</p>
<p>Note that only a few font formats provide vertical metrics. You can
test whether a given face object contains them by using the macro
<tt>FT_HAS_VERTICAL</tt>, which is true when appropriate.</p>
<p>Individual glyph metrics can be accessed by first loading the glyph
in a face's glyph slot, then accessing them through the
<tt>face->glyph->metrics</tt> structure, whose type is <a
href="../reference/ft2-base_interface.html#FT_Glyph_Metrics">
<tt>FT_Glyph_Metrics</tt></a>. We will discuss this in more detail
below; for now, we only note that it contains the following fields:</p>
<center><table width="90%" cellpadding=5>
<tr valign=top>
<td>
<tt>width</tt>
</td>
<td>
<p>This is the width of the glyph image's bounding box. It is
independent of the layout direction.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>height</tt>
</td>
<td>
<p>This is the height of the glyph image's bounding box. It is
independent of the layout direction.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>horiBearingX</tt>
</td>
<td>
<p>For <em>horizontal text layouts</em>, this is the horizontal
distance from the current cursor position to the leftmost border of
the glyph image's bounding box.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>horiBearingY</tt>
</td>
<td>
<p>For <em>horizontal text layouts</em>, this is the vertical
distance from the current cursor position (on the baseline) to the
topmost border of the glyph image's bounding box.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>horiAdvance</tt>
</td>
<td>
<p>For <em>horizontal text layouts</em>, this is the horizontal
distance used to increment the pen position when the glyph is drawn
as part of a string of text.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>vertBearingX</tt>
</td>
<td>
<p>For <em>vertical text layouts</em>, this is the horizontal
distance from the current cursor position to the leftmost border of
the glyph image's bounding box.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>vertBearingY</tt>
</td>
<td>
<p>For <em>vertical text layouts</em>, this is the vertical distance
from the current cursor position (on the baseline) to the topmost
border of the glyph image's bounding box.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>vertAdvance</tt>
</td>
<td>
<p>For <em>vertical text layouts</em>, this is the vertical distance
used to increment the pen position when the glyph is drawn as part
of a string of text.</p>
</td>
</tr>
</table>
</center>
<p><font color="red">NOTE: As not all fonts do contain vertical
metrics, the values of <tt>vertBearingX</tt>, <tt>vertBearingY</tt> and
<tt>vertAdvance</tt> should not be considered reliable when
<tt>FT_HAS_VERTICAL</tt> is false.</font></p>
<p>The following graphics illustrate the metrics more clearly. First,
for horizontal metrics, where the baseline is the horizontal axis:</p>
<center>
<img src="metrics.png" alt="horizontal layout" width=388 height=253>
</center>
<p>For vertical text layouts, the baseline is vertical, identical to the
vertical axis:</p>
<center>
<img src="metrics2.png" alt="vertical layout" width=294 height=278>
</center>
<p>The metrics found in <tt>face->glyph->metrics</tt> are normally
expressed in 26.6 pixel format (i.e., 1/64th of pixels), unless you use
the <tt>FT_LOAD_NO_SCALE</tt> flag when calling <tt>FT_Load_Glyph</tt>
or <tt>FT_Load_Char</tt>. In this case, the metrics will be expressed
in original font units.</p>
<p>The glyph slot object has also a few other interesting fields that
will ease a developer's work. You can access them through
<tt>face->glyph->xxx</tt>, where <tt>xxx</tt> is one of the
following fields:</p>
<center><table width="90%" cellpadding=5>
<tr valign=top>
<td>
<tt>advance</tt>
</td>
<td>
<p>This field is a <tt>FT_Vector</tt> which holds the transformed
advance for the glyph. That is useful when you are using a transform
through <tt>FT_Set_Transform</tt>, as shown in the rotated text
example of section I. Other than that, its value is
by default (metrics.horiAdvance,0), unless you specify
<tt>FT_LOAD_VERTICAL</tt> when loading the glyph image;
it will then be (0,metrics.vertAdvance)</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>linearHoriAdvance</tt>
</td>
<td>
<p>This field contains the linearly scaled value of the glyph's
horizontal advance width. Indeed, the value of
<tt>metrics.horiAdvance</tt> that is returned in the glyph slot is
normally rounded to integer pixel coordinates (i.e., it will be a
multiple of 64) by the font driver used to load the glyph
image. <tt>linearHoriAdvance</tt> is a 16.16 fixed float number
that gives the value of the original glyph advance width in
1/65536th of pixels. It can be use to perform pseudo
device-independent text layouts.</p>
</td>
</tr>
<tr valign=top>
<td>
<tt>linearVertAdvance</tt>
</td>
<td>
<p>This is the similar to <tt>linearHoriAdvance</tt> but for the
glyph's vertical advance height. Its value is only reliable if the
font face contains vertical metrics.</p>
</td>
</tr>
</table>
</center>
<hr>
<h3>
2. Managing glyph images
</h3>
<p>The glyph image that is loaded in a glyph slot can be converted into
a bitmap, either by using <tt>FT_LOAD_RENDER</tt> when loading it, or by
calling <tt>FT_Render_Glyph</tt>. Each time you load a new glyph image,
the previous one is erased from the glyph slot.</p>
<p>There are situations, however, where you may need to extract this
image from the glyph slot in order to cache it within your application,
and even perform additional transformations and measures on it before
converting it to a bitmap.</p>
<p>The FreeType 2 API has a specific extension which is capable of
dealing with glyph images in a flexible and generic way. To use it, you
first need to include the <a
href="../reference/ft2-header_file_macros.html#FT_GLYPH_H">
<tt>FT_GLYPH_H</tt></a> header file, as in:</p>
<div class="pre">
#include FT_GLYPH_H
</div>
<p>We will now explain how to use the functions defined in this
file:</p>
<h4>
a. Extracting the glyph image:
</h4>
<p>You can extract a single glyph image very easily. Here some code
that shows how to do it:</p>
<div class="pre">
FT_Glyph glyph; <span class="comment">/* a handle to the glyph image */</span>
...
error = FT_Load_Glyph( face, glyph_index, FT_LOAD_NORMAL );
if ( error ) { ... }
error = FT_Get_Glyph( face->glyph, &glyph );
if ( error ) { ... }
</div>
<p>As you see, we have:</p>
<ul>
<li>
<p>Created a variable, named <tt>glyph</tt>, of type <a
href="../reference/ft2-glyph_management.html#FT_Glyph">
<tt>FT_Glyph</tt></a>. This is a handle (pointer) to an
individual glyph image.</p>
</li>
<li>
<p>Loaded the glyph image normally in the face's glyph slot. We
did not use <tt>FT_LOAD_RENDER</tt> because we want to grab a
scalable glyph image, in order to later transform it.</p>
</li>
<li>
<p>Copy the glyph image from the slot into a new <tt>FT_Glyph</tt>
object, by calling <a
href="../reference/ft2-glyph_management.html#FT_Get_Glyph">
<tt>FT_Get_Glyph</tt></a>. This function returns an error code
and sets <tt>glyph</tt>.</p>
</li>
</ul>
<p>It is important to note that the extracted glyph is in the same
format than the original one that is still in the slot. For example,
if we are loading a glyph from a TrueType font file, the glyph image
will really be a scalable vector outline.</p>
<p>You can access the field <tt>glyph->format</tt> if you want to
know exactly how the glyph is modeled and stored. A new glyph object
can be destroyed with a call to <a
href="../reference/ft2-glyph_management.html#FT_Done_Glyph">
<tt>FT_Done_Glyph</tt></a>.</p>
<p>The glyph object contains exactly one glyph image and a 2D vector
representing the glyph's advance in 16.16 fixed float coordinates.
The latter can be accessed directly as <tt>glyph->advance</tt></p>
<p><font color="red">Note that unlike other FreeType objects, the
library doesn't keep a list of all allocated glyph objects. This
means you have to destroy them yourself instead of relying on
<tt>FT_Done_FreeType</tt> doing all the clean-up.</font></p>
<h4>
b. Transforming & copying the glyph image
</h4>
<p>If the glyph image is scalable (i.e., if <tt>glyph->format</tt>
is not equal to <tt>FT_GLYPH_FORMAT_BITMAP</tt>), it is possible to
transform the image anytime by a call to <a
href="../reference/ft2-glyph_management.html#FT_Glyph_Transform">
<tt>FT_Glyph_Transform</tt></a>.</p>
<p>You can also copy a single glyph image with <a
href="../reference/ft2-glyph_management.html#FT_Glyph_Copy">
<tt>FT_Glyph_Copy</tt></a>. Here is some example code:</p>
<div class="pre">
FT_Glyph glyph, glyph2;
FT_Matrix matrix;
FT_Vector delta;
... load glyph image in `glyph' ...
<span class="comment">/* copy glyph to glyph2 */</span>
error = FT_Glyph_Copy( glyph, &glyph2 );
if ( error ) { ... could not copy (out of memory) ... }
<span class="comment">/* translate `glyph' */</span>
delta.x = -100 * 64; <span class="comment">/* coordinates are in 26.6 pixel format */</span>
delta.y = 50 * 64;
FT_Glyph_Transform( glyph, 0, &delta );
<span class="comment">/* transform glyph2 (horizontal shear) */</span>
matrix.xx = 0x10000L;
matrix.xy = 0.12 * 0x10000L;
matrix.yx = 0;
matrix.yy = 0x10000L;
FT_Glyph_Transform( glyph2, &matrix, 0 );
</div>
<p>Note that the 2×2 transform matrix is always applied to the
16.16 advance vector in the glyph; you thus don't need to recompute
it.</p>
<h4>
c. Measuring the glyph image
</h4>
<p>You can also retrieve the control (bounding) box of any glyph image
(scalable or not) through the <a
href="../reference/ft2-glyph_management.html#FT_Glyph_Get_CBox">
<tt>FT_Glyph_Get_CBox</tt></a> function, as in:</p>
<div class="pre">
FT_BBox bbox;
...
FT_Glyph_Get_CBox( glyph, <em>bbox_mode</em>, &bbox );
</div>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -