Cocos2D＆ccDrawLine - 繪製流暢的線條

Question

我嘗試使用cocos2d繪製線條時遇到一些麻煩！我將touchMoved方法得到的點存儲在一個NSMutableArray中，並將該數組傳遞給CCNode的一個子類，稱爲Lines，用於從點數組中繪製線條。問題是，當我慢慢地滑動時，線條不平滑，但是當我滑動得更快時，線條更平滑。見下面的圖片：

慢刷卡：

快速掃：

我試圖解決ccpDistance的問題，計算最後保存點之間的距離，如果它還不夠遠我不保存它。我也試圖在每個已保存的位置畫出小圓圈，但這也不是很好。這裏是我的代碼：

在我GameScene：

- (void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event 
{ 
    CGPoint location = [touch locationInView:[touch view]]; 
    location = [[CCDirector sharedDirector] convertToGL:location]; 

    if (ccpDistance(lastPoint, location) > 10) { 
     //SAVE THE POINT 
     [linePoints addObject:[NSValue valueWithCGPoint:location]]; 

     [line updatePoints:linePoints]; 

     lastPoint = location; 
    } 
} 

和我行類：

- (void) updatePoints:(NSMutableArray *)_point 
{ 
    points = _point; 
} 

- (void) draw 
{ 
    if ([points count] > 0) { 
     ccGLEnable(GL_LINE_STRIP); 

     ccDrawColor4B(209, 75, 75, 255); 

     float lineWidth = 6.0 * CC_CONTENT_SCALE_FACTOR(); 

     glLineWidth(lineWidth); 

     int count = [points count]; 

     for (int i = 0; i < (count - 1); i++){ 
      CGPoint pos1 = [[points objectAtIndex:i] CGPointValue]; 
      CGPoint pos2 = [[points objectAtIndex:i+1] CGPointValue]; 

      ccDrawLine(pos1, pos2); 
      ccDrawSolidCircle(pos2, 2.5, 20); 
     } 
    } 
} 

而且，是有什麼在我的代碼可以做更好的改進性能？現在我沒有任何問題，即使有1000+點，但以防萬一...

任何幫助將不勝感激！提前致謝！

Answer 1

好吧，我發現了一個網站解釋清楚真正如何做到流暢的線條，它表現的很出色！仍然有抗鋸齒功能可以做，但也許我永遠不會做，因爲它在視網膜設備上看起來非常棒。這裏的網站：Drawing Smooth Lines with Cocos2D

而這裏的結果：

此外，對於那些有興趣在完成的代碼，那就是：

Line.m

- (void) drawCurPoint:(CGPoint)curPoint PrevPoint:(CGPoint)prevPoint 
{ 
    float lineWidth = 6.0; 
    ccColor4F red = ccc4f(209.0/255.0, 75.0/255.0, 75.0/255.0, 1.0); 

    //These lines will calculate 4 new points, depending on the width of the line and the saved points 
    CGPoint dir = ccpSub(curPoint, prevPoint); 
    CGPoint perpendicular = ccpNormalize(ccpPerp(dir)); 
    CGPoint A = ccpAdd(prevPoint, ccpMult(perpendicular, lineWidth/2)); 
    CGPoint B = ccpSub(prevPoint, ccpMult(perpendicular, lineWidth/2)); 
    CGPoint C = ccpAdd(curPoint, ccpMult(perpendicular, lineWidth/2)); 
    CGPoint D = ccpSub(curPoint, ccpMult(perpendicular, lineWidth/2)); 

    CGPoint poly[4] = {A, C, D, B}; 

    //Then draw the poly, and a circle at the curPoint to get smooth corners 
    ccDrawSolidPoly(poly, 4, red); 
    ccDrawSolidCircle(curPoint, lineWidth/2.0, 20); 
} 

- (void) draw 
{ 
    if ([points count] > 0) { 
     ccGLEnable(GL_LINE_STRIP); 

     ccColor4F red = ccc4f(209.0/255.0, 75.0/255.0, 75.0/255.0, 1.0); 
     ccDrawColor4F(red.r, red.g, red.b, red.a); 

     float lineWidth = 6.0 * CC_CONTENT_SCALE_FACTOR(); 

     glLineWidth(lineWidth); 

     int count = [points count]; 

     for (int i = 0; i < (count - 1); i++){ 
      CGPoint pos1 = [[points objectAtIndex:i] CGPointValue]; 
      CGPoint pos2 = [[points objectAtIndex:i+1] CGPointValue]; 

      [self drawCurPoint:pos2 PrevPoint:pos1]; 
     } 
    } 
} 

至於GameScene，那裏沒有任何改變（請參閱代碼問題）！請注意，您可以更改行if (ccpDistance(lastPoint, location) > X)，其中X是遊戲保存另一個點之前兩點之間的最小距離。 X越低，線條越平滑，但您的陣列中會有更多點，這可能會影響性能！

無論如何，謝謝你們的建議和你們的幫助，它幫助我以正確的方式得到了！

Answer 2

我認爲你可以通過平均來平滑你的線條畫。

- (void) updatePoints:(NSMutableArray *)_point 
{ 
    points = _point; 
    int count = [points count]; 
    for (int i = 3; i < (count - 4); i++) { 
     CGPoint pos1 = [[points objectAtIndex:i - 2] CGPointValue]; 
     CGPoint pos2 = [[points objectAtIndex:i - 1] CGPointValue]; 
     CGPoint pos3 = [[points objectAtIndex:i] CGPointValue]; 
     CGPoint pos4 = [[points objectAtIndex:i + 1] CGPointValue]; 
     CGPoint pos5 = [[points objectAtIndex:i + 2] CGPointValue]; 
     CGFloat xpos = (pos1.x + pos2.x + 2 * pos3.x + pos4.x + pos5.x)/6; 

     ... 
     (now calcuclate ypos similarly and store the point into an array) 
    } 
}