📄 tutorial_13.htm
字号:
<pre>BuildFont(); <font color="#ffffaa"> // 创建字体</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下
面就是画图的代码了。我们从清除屏幕和深度缓存开始。我们调用glLoadIdentity()来重置所有东西。然后我们将坐标系向屏幕里移动一个单位。
如果不移动的话无法显示出文字。当你使用透视投影而不是ortho投影的时候位图字体表现的更好。由于ortho看起来不好，所以我用透视投影，并移动坐
标系。。 <p>你会注意到如果把坐标系在屏幕里放的更深远，字体并不会想你想象的那样缩小，只是你可以在控制文字位置时有更多的选择。如果你
将坐标系移入屏幕一个单位，你就可以字X轴上-0.5到+0.5的范围内调整文字的位置。如果深入10个单位的话，移动范围就从-5到+5。它给了你更多
的选择来替代使用小数指定文字的精确位置。什么都不能改变文字的大小，即使是调用glScale(x,y,z)函数.如果你想改变字体的大小，只能在创建
它的时候改变它。<br>
</p></td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
</font><pre><font color="#aaffaa" size="3">int DrawGLScene(GLvoid) <font color="#ffffaa">// 此过程中包括所有的绘制代码</font>
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); <font color="#ffffaa"> // 清除屏幕及深度缓存</font>
glLoadIdentity(); <font color="#ffffaa"> // 重置当前的模型观察矩阵</font>
glTranslatef(0.0f,0.0f,-1.0f); <font color="#ffffaa">// 移入屏幕一个单位</font>
</font></pre>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下面我们使用一些奇妙的数学方法来产生颜色变化脉冲。如果你不懂我在做什么你也不必担心。我喜欢利用教多的变量和教简单的方法来达到我的目的。
<p>这
样，我使用那两个用来改变文字在屏幕上位置的计数器来改变红、绿、蓝这些颜色。红色值使用COS和计数器1在-1.0到1.0之间变化。绿色值使用SIN
和计数器2也在-1.0到1.0之间变化。蓝色值使用COS和计数器1和2在0.5到1.5之间变化。于是，蓝色值就永远不会等于0，文字的颜色也永远不
会消失。笨办法，但很管用。<br>
</p></td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> <font color="#ffffaa">// 根据字体位置设置颜色</font>
glColor3f(1.0f*float(cos(cnt1)),1.0f*float(sin(cnt2)),1.0f-0.5f*float(cos(cnt1+cnt2)));
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下
面是一个新命令。GlRasterPos2f(x,y)用于在屏幕上定位位图字体。屏幕的中心依然是（0，0），注意，这里没有Z轴位置。位图字体只使用
X轴（左/右）和Y轴（上/下）。因为我们将坐标系移入屏幕一个单位，往左最大值为-0.5，往右最大值为+0.5。你会注意到我在X轴上向左移动了
0.45个像素。它将文字移到屏幕的中心位置。否则，因为文字的起点就是屏幕的中心，会造成文字整体偏右。 <p>计算文字位置的算法与设置文字颜色的算法差不多。它将文字在X轴的-0.50到-0.40的范围内移动（记住，我们从起点就减
了0.45），这就保证文字始终能显示在屏幕内。由于使用COS和计数器1，所以文字左右摆动，使用SIN和计数器2在Y轴的-0.35到0.35范围内
移动。<br>
</p></td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> <font color="#ffffaa">// 设置光栅化位置，即字体的位置</font>
glRasterPos2f(-0.45f+0.05f*float(cos(cnt1)), 0.35f*float(sin(cnt2)));
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">现
在轮到我最满意的部分了。将真正的文字写到屏幕上。我试着把它做的非常简单，而且非常友好，便于使用。你会注意到它看起来像调用一个OpenGL的函数，
有点类似C语言中的输出语句的风格。在屏幕上输出文字只需要调用glPrint(“你想写的文字”).它很容易。文字将精确的显示在屏幕上你指定的位置。
<p>Shawn
T.发给我修改过的代码允许glPrint传递变量到屏幕。这意味着你可以增加一个计数器，并且在屏幕上显示出这个计数器的值，它是这样工作的。。。在下
一行你看到：要显示的普通文字，然后有一个空格，一个破折号，一个空格，然后是一个“符号”(%7.2f)（C语言中的输出格式控制字）.现在你会看着%
7.2说这是什么意思。它其实很简单，%是一个记号，表示不要把7.2f本身显示在屏幕上，因为它代表一个变量。7表示小数点左边最多有7位数字。然后是
小数部分，小数点右边的2表示小数点右边最多保留两位小数。最后，f表示我们想要显示的数字类型为浮点型。我们想在屏幕上显示计数器1的值。比如，计数器
1的值为300.12345f，那么在屏幕上显示的数字就是300.12，小数部分的3，4，5会舍去。因为我们只需要显示小数点后面两位数字。</p>
<p>我知道如果你是一个有经验的C程序员，这是个很基础的问题。不过也许也有人没有用过pringf函数。如果你想了解更多的字符，那就买本书或者查阅MSDN。<br>
</p></td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> glPrint("Active OpenGL Text With NeHe - %7.2f", cnt1); <font color="#ffffaa"> // 输出文字到屏幕</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">最后一件事就是以不同的速率增加计数器的值来产生颜色脉冲并且移动文字。</td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> cnt1+=0.051f; <font color="#ffffaa">// 增加计数器值</font>
cnt2+=0.005f; <font color="#ffffaa">// </font><font color="#aaffaa" size="3"><font color="#ffffaa">增加计数器值</font></font>
return TRUE; <font color="#ffffaa">// 继续运行</font>
}
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">最后，如下所示，就是增加在KillGLWindow()函数中增加KillFont()函数，这很重要，它在我们退出程序之前做清理工作。<br></td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre>KillFont(); <font color="#ffffaa">// 删除字体</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_13_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_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_13_files/l.gif"><img src="Tutorial_13_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%"><p>好了，用于使用位图字体的所有一切都在你的OpenGL程序中了。我在网上寻找过与这篇教程相似的文章，但没有找到。或许我的网站是第一个涉及这个主题的C代码的网站吧。不管怎样，享用这篇教程，快乐编码！</p>
<table border="1" width="100%">
<tbody><tr>
<td width="27%"><img src="Tutorial_13_files/logo%25203.jpg" align="middle" height="200" width="209"></td>
<td width="73%">版权与使用声明:<br>
我是个对学习和生活充满激情的普通男孩,在网络上我以DancingWind为昵称，我的联系方式是zhouwei02@mails.tsinghua.edu.cn，如果你有任何问题，都可以联系我。
<p>引子<br>
网络是一个共享的资源，但我在自己的学习生涯中浪费大量的时间去搜索可用的资料，在现实生活中花费了大量的金钱和时间在书店中寻找资料，于是我给自己起了
个昵称DancingWind，其意义是想风一样从各个知识的站点中吸取成长的养料。在飘荡了多年之后，我决定把自己收集的资料整理为一个统一的资源库。</p>
<p>版权声明<br>
所有DancingWind发表的内容，大多都来自共享的资源，所以我没有资格把它们据为己有，或声称自己为这些资源作出了一点贡献。故任何人都可以复
制，修改，重新发表，甚至以自己的名义发表，我都不会追究，但你在做以上事情的时候必须保证内容的完整性，给后来的人一个完整的教程。最后，任何人不能以
这些资料的任何部分，谋取任何形式的报酬。</p>
<p>发展计划<br>
在国外，很多资料都是很多人花费几年的时间慢慢积累起来的。如果任何人有兴趣与别人共享你的知识，我很欢迎你与我联系，但你必须同意我上面的声明。</p>
<p>感谢<br>
感谢我的母亲一直以来对我的支持和在生活上的照顾。<br>
感谢我深爱的女友田芹，一直以来默默的在精神上和生活中对我的支持，她甚至把买衣服的钱都用来给我买书了，她真的是我见过的最好的女孩，希望我能带给她幸福。</p>
<p>资源下载: <br>
文档 <a href="http://www.owlei.com/DancingWind/Res/mht/NeHe%20OpenGL%20Chinese%20Course%2013.mht">网页格式</a>
<a href="http://www.owlei.com/DancingWind/Res/pdf/OpenGL_Nehe_Course_Tutorial_13.pdf">PDF格式</a><br>
源码 <a href="http://www.owlei.com/DancingWind/Res/Src/13_Font.rar">RAR格式</a></p></td>
</tr>
</tbody></table>
<table border="0" width="100%">
<tbody>
<tr>
<td align="left" width="50%"><a href="http://www.owlei.com/DancingWind/Course/Tutorial_12.htm"><b><font size="-1"><
第12课</font></b></a></td>
<td align="right" width="50%"><a href="http://www.owlei.com/DancingWind/Course/Tutorial_14.htm"><b><font size="-1">第14课
></font></b></a></td>
</tr>
</tbody>
</table>
</td>
<td background="Tutorial_13_files/r.gif"><img src="Tutorial_13_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_13_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_13_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_13_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
</center></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -