📄 tutorial_17.htm
字号:
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">cx
和cy应该保存一个从0.0到1.0的非常小的浮点数。如果cx和cy同时为0,下面第一行的代码将为:glTexCoord2f(0.0f,1-
0.0f-0.0625f)。记得0.0625正是我们纹理的1/16,或者说是一个字符的宽/高。下面的纹理坐标将是我们纹理的左下角。 <p>注意我们使用glVertex2i(x,y)而不是glVertex3f(x,y,z)。我们的字体是2D字体,所以我们不需要z
值。因为我们使用的是正交投影,我们不需要移进屏幕。在一个正交投影平面绘图你所需的是指定x和y坐标。因为我们的屏幕是以像素形式从0到639(宽)从
0到479(高),我们既不需用浮点数也不用负数:)</p>
<p>我们设置正交投影屏幕的方式是,(0,0)将是屏幕的左下角,(640,480)是屏幕的右上角。x轴上0是屏幕的左边界,639是右边界。y轴上0时下便捷,479是上便捷。基本上我们避免了负坐标。对那些不在乎透视,更愿意同像素而不是单元打交道的人来说更方便:)
</p></td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> glTexCoord2f(cx,1-cy-0.0625f); <font color="#ffffaa">// 左下角的纹理坐标</font>
glVertex2i(0,0); <font color="#ffffaa">// 左下角的坐标</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下一个纹理坐标现在是上个纹理坐标右边1/16(刚好一个字符宽)。所以这将是纹理的右下角。
<br></td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> glTexCoord2f(cx+0.0625f,1-cy-0.0625f); <font color="#ffffaa">// 右下角的纹理坐标</font>
glVertex2i(16,0); <font color="#ffffaa">// 右下角的坐标</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">第三个纹理坐标在我们的字符的最右边,但上移了纹理的1/16(刚好一个字符高)。这将是一个单独字符的右上角。</td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> glTexCoord2f(cx+0.0625f,1-cy); <font color="#ffffaa">// 右上角的纹理坐标</font>
glVertex2i(16,16); <font color="#ffffaa">// 右上角的坐标</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">最后我们左移来设置字符左上角的最后一个纹理坐标。 </td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> glTexCoord2f(cx,1-cy); <font color="#ffffaa">// 左上角的纹理坐标</font>
glVertex2i(0,16); <font color="#ffffaa">// 左上角的坐标</font>
glEnd(); <font color="#ffffaa">// 四边形字符绘制完成</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">最终,我们右移了10个像素,置于纹理的右边。如果我们不平移,文字将被绘制到各自的上面。由于我们的字体太窄,我们不想右移16个像素。如果那样的话,每个字之间将有很大间隔。只移动10个像素去除了间隔。
</td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> glTranslated(10,0,0); <font color="#ffffaa">// 绘制完一个字符,向右平移16个单位</font>
glEndList(); <font color="#ffffaa">// 字符显示列表结束</font>
} <font color="#ffffaa">// 循环建立256个显示列表</font>
}
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下面这段代码与我们在其它字体教程中用来在程序退出前释放显示列表的相同。所有自base开始的256个显示列表都将被销毁(这样做很好!)。
</td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre>GLvoid KillFont(GLvoid) <font color="#ffffaa"></font>
{
glDeleteLists(base,256); <font color="#ffffaa">// 从内存中删除256个显示列表</font>
}
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下一段代码将完成绘图。一切都几乎是新的,所以我将尽可能详细的解释每一行。一个小提示:很多都可加入这段代码,像是变量的支持,字体大小、间距的调整,和很多为恢复到我们决定打印前的状况所做的检查。
<p>glPrint()有三个参数。第一个是屏幕上x轴上的位置(从左至右的位置),下一个是y轴上的位置(从下到上...0是底部,越往上越大)。然后是字符串(我们想打印的文字),最后是一个叫做set的变量。如果你看过Giuseppe
D'Agata制作的位图,你会注意到有两个不同的字符集。第一个字符集是普通的,第二个是斜体的。如果set为0,第一个字符集被选中。若set为1则选择第二个字符集。</p></td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre>GLvoid glPrint(GLint x, GLint y, char *string, int set) <font color="#ffffaa">// 绘制字符</font>
{
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td background="Tutorial_17_files/l.gif"><img src="Tutorial_17_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">我们要做的第一件事是确保set的值非0即1。如果set大于1,我们将使它等于1。 </td>
<td background="Tutorial_17_files/r.gif"><img src="Tutorial_17_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><img src="Tutorial_17_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_17_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_17_files/br.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<font color="#aaffaa" size="3">
<pre> if (set>1) <font color="#ffffaa">// 如果字符集大于1</font>
{
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -