在 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。

这就是平滑的作用。

---

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

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

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

---

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

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