泰然

 找回密码
 注册泰然

[ityran翻译]OpenGL ES for iPhone: Drawing a Circle - Part I

2011-9-10 17:38| 发布者: u0u0| 查看: 7019| 评论: 8|原作者: Jan Vantomme|来自: http://vormplus.be/

摘要: OpenGL ES for iPhone:画圆 第一节

原文地址:http://vormplus.be/blog/article/opengl-es-for-iphone-drawing-a-circle-part-i

 

Processing译者注:processing是个编程语言,下同)转到iPhone开发是个痛苦的过程。OpenGL的实现有些不同,而且文档很少。我从Dave Mark and Jeff Lamarche 写的“Beginning iPhone Development”以及iPhone Development blog上学到不少。在这几篇文章中我想分享我学到的一些知识。可以把这个教程作为iPhone生成设计的入门来阅读,让我们开始OpenGL编程吧。

 

第一步:把工程搭起来

OpenGL ES Application 模板建立一个新的工程以openglcircle命名。

确定你成功用 UIStatusBarHidden trick 隐藏了状态栏,得到一个全屏程序。

 

第一步:一些便捷的函数

新增一个头文件 Constants.h到工程。这个文件包含一些很便捷的函数,将会在接下来的设计中多次使用到。一个函数是把角度转换成幅度,另一个函数是生成一个区间范围内的随机float数。把下面的代码加入到文件中:

#define DEGREES_TO_RADIANS(x) \
    (3.14159265358979323846 * x / 180.0)
#define RANDOM_FLOAT_BETWEEN(x, y) \
    (((float) rand() / RAND_MAX) * (y - x) + x)
 

第三步: hold住速度

打开 openglcircleAppDelegate.m ” animationInterval 改成1.0 / 2.0。这样,view将在一秒内只刷新两次。你可以在完成整个工程后再把这个数字改回来。但是现在刷新慢点可以让我们更清楚的看到屏幕的变化。

 

第四步:编辑View

打开 EAGLView.m ” import头文件 Constants.h ”. 接下来删除 drawView方法并添加我们的自定义绘图方式。就像下面这样:

- (void)drawView {
    [EAGLContext setCurrentContext:context];
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, ¬
        viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
    glMatrixMode(GL_MODELVIEW);
    //
    // custom drawing will be done right here ...
    //
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, ¬
        viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}
 

第五步:清空背景

processing中可以使用 background(0) 清空背景为黑色。OpenGL ES 中你需要结合glClear()glClearColor()来完成。glClearColor() 设置背景颜色,glClear()把颜色刷新出来。glClearColor()方法有4个颜色参数 (red, green, blue and alpha). 值必须在 0.0  1.0之间
如果glClear()参数设置成 GL_COLOR_BUFFER_BIT,函数将会清空显示屏。把这两行加到glOrthof()函数后面。

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
 

第六步:画圆

为了美观,我们需要定360个点来绘制这个圈。每个点有两个值:x轴和y轴,所以我们需要计算720个数值。我们现在需要一个空的 GLfloat 数组来装着720个值。

代码如下:

GLfloat vertices[720];

接下来的这段代码把unit circle边界正确的xy值填进数组:

 

译者注:原文为DEGREES_TO_RADIANS(i),有读者发现错误,应为DEGREES_TO_RADIANS(i/2)

这里已修正。

for (int i = 0; i < 720; i += 2) {
    // x value
    Vertices[i]   = (cos(DEGREES_TO_RADIANS(i/2)) * 1);
    // y value
    vertices[i+1] = (sin(DEGREES_TO_RADIANS(i/2)) * 1);
}

你必须告诉OpenGL你绘制的图形(圆)所需要的顶点数组。调用 glVertexPointer() 方法设置顶点。同时调用glEnableClientState()方法来启用设置的顶点数组 

glVertexPointer(2, GL_FLOAT, 0, vertices);
glEnableClientState(GL_VERTEX_ARRAY);

绘制图形前,我们必须告诉OpenGL需要绘制的图形颜色。在Processing中使用函数fill().,而在 OpenGL 中我们可以用 glColor4f()方法设置图形颜色。 这个方法和之前提到的glClearColor()方法一样有4个颜色参数。下面这行代码设置填充色为红色:

glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

最后,调用 glDrawArrays() 方法把圆画出来。

glDrawArrays(GL_TRIANGLE_FAN, 0, 360);

在模拟器下运行,将会看到下图的结果

Downloads

你可以在这里下载教程的工程文档: openglcircle.zip.

Part  II,我们将做少许改动画一个更好的圆。

 

翻译:Iven (ityran.com)

校对:u0u0 (ityran.com)


licensed under  Creative Commons license.

12

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (13 人)

发表评论

最新评论

引用 coolbabylch 2012-11-14 17:02
必须要学会
引用 bono 2012-8-9 15:08
我来看下,如何不通过图片上下文来画一条线
引用 功夫杨 2012-7-10 14:58
顶顶顶
引用 manman 2012-4-27 20:39
必须要学会
引用 yuiopnessiah 2012-2-20 16:23
学习2
引用 cl890305 2012-1-30 09:23
新的开始
引用 panzhiccp 2011-12-28 10:40
我顶顶顶
引用 chichi1314 2011-12-28 04:14
学习

查看全部评论(8)

手机版|小黑屋|Archiver| 泰然论坛 ( 蜀ICP备13018980号-2 )

GMT+8, 2017-8-21 14:36 , Processed in 0.011285 second(s), 13 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部