📄 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"> body { font-family: Verdana, Geneva, Arial, Helvetica, serif; color: #000000; background: #FFFFFF; } p { text-align: justify; } h1 { text-align: center; } li { text-align: justify; } td { padding: 0 0.5em 0 0.5em; } a:link { color: #0000EF; } a:visited { color: #51188E; } a:hover { color: #FF0000; } 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, 2006 David Turner (<a href="mailto:david@freetype.org">david@freetype.org</a>)<br> © 2003, 2006 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 as 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;⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -