iphone - 在 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 paper 应用程序上写同样的东西，这就是图像:

有没有人知道如何像在 mamboo 应用程序中那样获得漂亮的文字？

Answer 1

与其使用直线连接点 (CGPathAddLineToPoint)，不如尝试使用贝塞尔曲线:CGPathAddCurveToPoint 或 CGPathAddQuadCurveToPoint。

这就是平滑的原因。

---

如果您不熟悉贝塞尔曲线，您可能会发现 the wikipedia page about Bézier curves有趣(不是特别是数学方程式，而是看草图和动画图像)。它会让您大致了解控制点如何影响线条关键点周围线条的平滑度。

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

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

---

一个例子(开箱即用，只是我脑海中的一个建议，从未测试过，根据您的需要调整系数)计算每个关键点 A 和 B 之间的控制点 C 是使 AC 成为，比如，AB 长度的 2/3，和 (AB,AC) 形成 30 度角或类似的角度。

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