ios - Cocos2D & ccDrawLine - 绘制流畅的线条

Question

我在用cocos2d画线的时候遇到了一些问题!我将从 touchMoved 方法获得的点存储在 NSMutableArray 中，并将该数组传递给名为 Lines 的 CCNode 子类，我使用它从点数组中绘制线。问题是当我慢慢滑动时线条不流畅，但是当我快速滑动时，线条会平滑得多。请看下面的图片:

慢速滑动:

快速滑动:

我试图用 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

好的，我找到了一个网站，非常清楚地解释了如何制作平滑的线条，而且效果非常好!仍然有抗锯齿要做，但也许我永远不会做，因为它在 Retina 设备上看起来真的很棒。这是网站: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 越低，线条越平滑，但阵列中的点会更多，这可能会影响性能!

无论如何，谢谢你们的建议和帮助，它帮助我走上了正确的道路!