在iPad上流畅写作

Question

我目前正在开发一个iPad项目,我需要这个功能让用户用手写笔在一张纸上书写.

我测试了几个手指,发现竹子是最好的.他们还有一个免费的应用程序,您可以用它来编写.

我面临的问题是我使用的方法不能提供平滑的曲线.竹纸应用程序提供完美的线条.这是我到目前为止的代码:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    UIGraphicsBeginImageContext(self.frame.size);

    // draw accumulated lines
    if ([self.lines count] > 0) {
        for (Line *tempLine in self.lines){
            CGContextSetAlpha(context, tempLine.opacity);
            CGContextSetStrokeColorWithColor(context, tempLine.lineColor.CGColor);
            CGContextSetLineWidth(context, tempLine.lineWidth);
            CGContextSetLineCap(context, kCGLineCapRound);
            CGContextSetLineJoin(context, kCGLineJoinRound);
            CGContextAddPath(context, tempLine.linePath);
            CGContextStrokePath(context);

            }
    }

    //draw current line
    CGContextSetAlpha(context, self.currentLine.opacity);


    CGContextSetStrokeColorWithColor(context, self.currentLine.lineColor.CGColor);
    CGContextSetLineWidth(context, self.currentLine.lineWidth);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineJoin(context, kCGLineJoinRound);
    CGContextBeginPath(context);
    CGContextAddPath(context, self.currentLine.linePath);
    CGContextStrokePath(context);


    UIGraphicsEndImageContext();


}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint cPoint = [touch locationInView:self];

    CGPathMoveToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y);

    [self setNeedsDisplay];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];   
    CGPoint currentPoint = [touch locationInView:self];

    CGPathAddLineToPoint(self.currentLine.linePath, NULL, currentPoint.x, currentPoint.y);

    [self setNeedsDisplay];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {  
    UITouch *touch = [touches anyObject];
    CGPoint cPoint = [touch locationInView:self];
    CGPathAddLineToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y);

    [self setNeedsDisplay];
    [self.lines addObject:self.currentLine];
    Line *nextLine = [[Line alloc] initWithOptions:self.currentLine.lineWidth color:self.currentLine.lineColor opacity:self.currentLine.opacity];
    self.currentLine = nextLine;
    [nextLine release];
}

这些图像清楚地表明了我面临的问题.这是使用上面提供的代码编写时生成的图像:

如果我在Mamboo纸质应用程序上写相同的东西,这是图像:

有没有人知道如何在mamboo应用程序中获得漂亮的写作？

Answer 1

不要使用直线(CGPathAddLineToPoint)连接点,而应尝试使用贝塞尔曲线:CGPathAddCurveToPoint或CGPathAddQuadCurveToPoint.

这就是平滑的原因.

如果你不熟悉bézier曲线,你可能会发现关于Bézier曲线的维基百科页面很有趣(不是特别是数学方程,而是看草图和动画图像).它将使您大致了解控制点如何影响线条关键点周围线条的平滑.

对于您的情况,二次曲线(两个关键点之间的每个子段只有一个控制点)就足够了.

(从P0到P1的一条线,使用控制点P1平滑)

一个例子(开箱即用,只是我的想法,从未测试,根据您的需要调整系数)来计算每个关键点A和B之间的控制点C是使AC,例如,2/AB的长度的第3个,和(AB,AC)形成30度的角度或类似的角度.

您甚至可以在应用程序的设置中建议使用滑块调整平滑强度,这将影响您选择的值以计算每个控制点并查看哪些系数最适合.