2010-09-08 39 views
2

this site ...渲染抗鋸齒線條與紋理=>搜索非常簡單的例子

...他們解釋如何繪製抗鋸齒線。

正是我想要的!
...

我不知道如何實現,對於簡單的線條。我已經找到了這本書的在線版本(這篇文章是從這本書中衍生出來的),我下載了示例代碼(展示了一個做花哨動作的簡筆畫),但是有太多的mambojambo正在進行......有些奇怪的python腳本......像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);  
    

回答

1

我也遇到過這個問題。我花了一段時間弄清這一點...我用(在Apple.com通過瓦爾特·本雅明)與此類似一會兒一個解決方案:

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

這工作,很容易與它看起來不錯,但它仍然不是最好的(因爲我在做什麼)。最後,我寫了自己的解決方案,將GL Paint粒子繪圖與他的點對點線繪製解決方案相結合。

我做了一個數組,在touchesBegin,touchesMoved,我加了點吧:

[currentStroke addObject:[NSValue valueWithCGPoint:point]]

然後我遍歷筆畫,如您使用GL_POINTS在GL油漆看到。

+0

謝謝你,我真的很感激。 – Allisone 2010-09-16 11:38:51

+0

不用擔心。希望它幫助了一個抱歉,我沒有看到它早點! – Beaker 2010-09-17 07:42:12

+0

嗯,你是新來的,所以我甚至認爲我是你回答的第一個問題,而我相信沒有人會回答它。但是我不得不承認,兩天前我已經成功地使用紋理技術實現了AALine(經過很多C++ elemts和庫我不理解的痛苦原因以及混入到obj-c cocos2d框架中)。你的工作立即,現在我會清理我的代碼,優化它,然後我會決定通過性能使用哪種技術。 – Allisone 2010-09-17 08:07:29

0

也許你可以看到this。 我從opengl-es的鏈接中解決了這個問題。

+0

做這件事是一個10像素圈工作?你有沒有工作示例代碼? – Allisone 2010-09-09 00:16:14

+0

我的問題是我的紋理是用矩形繪製的,邊緣需要反鋸齒。當測量這個網站並獲得鏈接時,我通過重新繪製邊線來解決我的問題。它現在運作良好。但我的代碼是opengl-es,而不是cocos2d。 – AechoLiu 2010-09-09 00:22:59

+0

Cocos2d使用OpenGL-es。這只是一個很好的框架,有很多易用的東西,如精靈,菜單,動畫,場景轉場等。 – Allisone 2010-09-09 00:28:09

2

感謝保羅·哈伯,這裏是他與我分享了繪製抗鋸齒框,點和線的一些代碼:

/* 
* 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); 
}