使用纹理渲染抗锯齿线=>寻找非常简单的例子

时间:2010-09-08 23:24:19

标签: iphone opengl-es cocos2d-iphone antialiasing

this site ...

......他们解释如何绘制抗锯齿线。

正是我想要的!
...

我不明白如何为简单的线条实现这一目标。我已经找到了这本书的在线版本(这篇文章是从这本书中得到的),我已经下载了示例代码(显示一个简单的人物做了花哨的动作),但是有太多的mambojambo正在进行......有些奇怪作为png图像和头文件的圈子,几乎所有内容都是用cpp编写的,我复制到我的项目的文件会产生很多我无法正确解决的错误,等等等等。而且我认为我不需要所有这些花哨的东西,因为我只想在一个简单的基于cocos2d的应用程序中绘制线条[顺便说一句....我不想使用AA,但我的线条比5px厚连接时它们会有丑陋的洞(fe由几条线组成的圆圈),所以我必须使用AA。

是否有人使用链接文章中解释的原则拥有或发现了一小块可运行的示例代码?


注意:

  1. 在图片中你看到了洞:
    http://pimml.de/circles.png

  2. 在这里您可以找到上述火柴人的代码(AA行):http://examples.oreilly.com/9780596804831/readme.html#AaLines

  3. 这是我画圈子的方式:

    int segments = 80;
    CGFloat width = 100;
    CGFloat height = 100;
    CGPoint center = ccp(800,200);  
    
    glDisable(GL_TEXTURE_2D);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_COLOR_ARRAY);
    //glEnable(GL_LINE_SMOOTH); // doesn't work on device
    glTranslatef(center.x, center.y, 0.0);
    glLineWidth(3.0f);
    GLfloat vertices[segments*2];
    int count=0;
    for (GLfloat i = 0; i < 360.0f; i+=(360.0f/segments))
    {
        vertices[count++] = (cos(degreesToRadian(i))*width);
        vertices[count++] = (sin(degreesToRadian(i))*height);
    }
    glVertexPointer (2, GL_FLOAT , 0, vertices); 
    glDrawArrays (GL_LINE_LOOP, 0, segments);
    
    glEnableClientState(GL_COLOR_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glEnable(GL_TEXTURE_2D);    
    

3 个答案:

答案 0 :(得分:2)

感谢Paul Haeberli,以下是他与我分享的一些代码,用于绘制抗锯齿的盒子,点和线:

/*
 *   Antialised 2D points, lines and rectangles for iOS devices
 *
 *   The feathered edge of these primitives is width/2.0.
 *
 *   If you are working in screen space, the width should be 1.0.
 *
 *       Paul Haeberli 2010
 *
 */
void fillSmoothRectangle(CGRect *r, float width)
{
    GLfloat rectVertices[10][2];
    GLfloat curc[4]; 
    GLint   ir, ig, ib, ia;

    // fill the inside of the rectangle
    rectVertices[0][0] = r->origin.x;
    rectVertices[0][1] = r->origin.y;
    rectVertices[1][0] = r->origin.x+r->size.width;
    rectVertices[1][1] = r->origin.y;
    rectVertices[2][0] = r->origin.x;
    rectVertices[2][1] = r->origin.y+r->size.height;
    rectVertices[3][0] = r->origin.x+r->size.width;
    rectVertices[3][1] = r->origin.y+r->size.height;

    glEnableClientState(GL_VERTEX_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, rectVertices);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    rectVertices[0][0] = r->origin.x;
    rectVertices[0][1] = r->origin.y;
    rectVertices[1][0] = r->origin.x-width;
    rectVertices[1][1] = r->origin.y-width;
    rectVertices[2][0] = r->origin.x+r->size.width;
    rectVertices[2][1] = r->origin.y;
    rectVertices[3][0] = r->origin.x+r->size.width+width;
    rectVertices[3][1] = r->origin.y-width;
    rectVertices[4][0] = r->origin.x+r->size.width;
    rectVertices[4][1] = r->origin.y+r->size.height;
    rectVertices[5][0] = r->origin.x+r->size.width+width;
    rectVertices[5][1] = r->origin.y+r->size.height+width;
    rectVertices[6][0] = r->origin.x;
    rectVertices[6][1] = r->origin.y+r->size.height;
    rectVertices[7][0] = r->origin.x-width;
    rectVertices[7][1] = r->origin.y+r->size.height+width;
    rectVertices[8][0] = r->origin.x;
    rectVertices[8][1] = r->origin.y;
    rectVertices[9][0] = r->origin.x-width;
    rectVertices[9][1] = r->origin.y-width;

    glGetFloatv(GL_CURRENT_COLOR, curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte rectColors[] = {
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, rectVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, rectColors);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 10);
    glDisableClientState(GL_COLOR_ARRAY);
}

void drawSmoothLine(CGPoint *pos1, CGPoint *pos2, float width)
{
    GLfloat lineVertices[12], curc[4]; 
    GLint   ir, ig, ib, ia;
    CGPoint dir, tan;

    width = width*8;
    dir.x = pos2->x - pos1->x;
    dir.y = pos2->y - pos1->y;
    float len = sqrtf(dir.x*dir.x+dir.y*dir.y);
    if(len<0.00001)
        return;
    dir.x = dir.x/len;
    dir.y = dir.y/len;
    tan.x = -width*dir.y;
    tan.y = width*dir.x;

    lineVertices[0] = pos1->x + tan.x;
    lineVertices[1] = pos1->y + tan.y;
    lineVertices[2] = pos2->x + tan.x;
    lineVertices[3] = pos2->y + tan.y;
    lineVertices[4] = pos1->x;
    lineVertices[5] = pos1->y;
    lineVertices[6] = pos2->x;
    lineVertices[7] = pos2->y;
    lineVertices[8] = pos1->x - tan.x;
    lineVertices[9] = pos1->y - tan.y;
    lineVertices[10] = pos2->x - tan.x;
    lineVertices[11] = pos2->y - tan.y;

    glGetFloatv(GL_CURRENT_COLOR,curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte lineColors[] = {
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, lineVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, lineColors);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);
    glDisableClientState(GL_COLOR_ARRAY);
}


void drawSmoothPoint(CGPoint *pos, float width)
{
    GLfloat pntVertices[12], curc[4]; 
    GLint   ir, ig, ib, ia;

    pntVertices[0] = pos->x;
    pntVertices[1] = pos->y;
    pntVertices[2] = pos->x - width;
    pntVertices[3] = pos->y - width;
    pntVertices[4] = pos->x - width;
    pntVertices[5] = pos->y + width;
    pntVertices[6] = pos->x + width;
    pntVertices[7] = pos->y + width;
    pntVertices[8] = pos->x + width;
    pntVertices[9] = pos->y - width;
    pntVertices[10] = pos->x - width;
    pntVertices[11] = pos->y - width;

    glGetFloatv(GL_CURRENT_COLOR,curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte pntColors[] = {
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, pntVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, pntColors);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
    glDisableClientState(GL_COLOR_ARRAY);
}

答案 1 :(得分:1)

我也遇到了这个问题。我花了一段时间搞清楚这一点...我使用了类似于这个的解决方案一段时间(通过Apple.com上的walterBenjamin):

https://devforums.apple.com/message/264670

这很有效,很容易看起来不错,但它仍然不是最好的(对于我正在做的事情)。最后,我编写了自己的解决方案,将GL Paint粒子绘图与他的点对点线绘图解决方案相结合。

我制作了一个数组,在touchesBegin,touchesMoved,我添加了一个观点:

[currentStroke addObject:[NSValue valueWithCGPoint:point]]

然后我遍历笔画,例如你在GL Paint中使用GL_Points看到的笔画。

答案 2 :(得分:0)

也许你可以看到this。 我通过该链接解决了opengl-es的问题。