iOS绘图仿平尖笔

Question

我正在创建一个绘图应用程序，我想模拟一个平头笔。令人惊讶的是，它变成了相当艰巨的任务。这是我的解决方案:

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

    currentPoint = CGPointMake(roundf(currentPoint.x), roundf(currentPoint.y));

    UIGraphicsBeginImageContext(self.drawingImageView.frame.size);
    [self.drawingImageView.image drawInRect:CGRectMake(0, 0, self.drawingImageView.frame.size.width, self.drawingImageView.frame.size.height)];

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextMoveToPoint (ctx, lastPoint.x + 8.f, lastPoint.y - 8.f);
    CGContextAddLineToPoint(ctx, currentPoint.x + 8.f, currentPoint.y - 8.f);
    CGContextAddLineToPoint(ctx, currentPoint.x - 8.f, currentPoint.y + 8.f);
    CGContextAddLineToPoint(ctx, lastPoint.x - 8.f, lastPoint.y + 8.f);
    CGContextAddLineToPoint(ctx, lastPoint.x + 8.f, lastPoint.y - 8.f);

    CGContextClosePath(ctx);

    CGContextSetRGBFillColor(ctx, 0, 0, 0, 1);
    CGContextDrawPath(ctx, kCGPathFillStroke);

    [self.drawingImageView performSelectorInBackground:@selector(setImage:) withObject:UIGraphicsGetImageFromCurrentImageContext()];
    UIGraphicsEndImageContext();

    lastPoint = currentPoint;
}

这是它的外观:



如您所见，边缘不平滑。我想使用 UIBezierPath相反，但我没有找到使用 UIBezierPath 实现平头笔效果的方法.也许有一些方法可以改进我的代码或任何其他方法(也许 UIBezierPath )？

我能找到的唯一具有这种绘画风格的应用程序是名为“Khattat”的应用程序。它是阿拉伯语，您应该点击主屏幕上的第二个按钮以打开绘画。这是我想要的一个完美的例子。

Answer 1

这是一个很常见的问题。

问题出在线路上

UIGraphicsBeginImageContext(self.drawingImageView.frame.size);

它的作用是创建一个新的透明图像上下文，其大小与您的 ImageView 相同，但比例为 1.0。 .由于这种比例 - 任何在其中完成的绘图都必须进行上采样才能显示在 2x 或 3x 显示器上 - 因此您的绘图会变得模糊。

修复非常简单。你可以使用

UIGraphicsBeginImageContextWithOptions(drawingImageView.frame.size, NO, 0.0);

通过 0.0在 scale 参数中，Core Graphics 会自动检测屏幕的比例，并设置上下文的比例来匹配。因此，您在其中所做的任何绘图都将以正确的分辨率完成。

另外，我刚刚注意到这条线

[self.drawingImageView performSelectorInBackground:@selector(setImage:) withObject:UIGraphicsGetImageFromCurrentImageContext()];

这听起来不是一个好主意。如果您查看 UIView documentation ，你会看到 Apple 说:

Manipulations to your application’s user interface must occur on the main thread. Thus, you should always call the methods of the UIView class from code running in the main thread of your application.

因此你应该做

self.drawingImageView.image = UIGraphicsGetImageFromCurrentImageContext()

反而。

关于您对使用 UIBezierPath 的评论- 我看不出这种变化会给你带来什么明显的好处——自己将路径绘制到上下文中就像使用 UIBezierPath 一样直接。作图的方法。

但是，如果您仍然想要，当然可以使用 UIBezierPath相反 - 您需要执行以下操作:

UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self];

currentPoint = CGPointMake(roundf(currentPoint.x), roundf(currentPoint.y));

UIGraphicsBeginImageContextWithOptions(drawingImageView.frame.size, NO, 0.0);
[drawingImageView.image drawInRect:CGRectMake(0, 0, drawingImageView.frame.size.width, drawingImageView.frame.size.height)];

UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:(CGPoint){lastPoint.x + 8.f, lastPoint.y - 8.f}];
[path addLineToPoint:(CGPoint){currentPoint.x + 8.f, currentPoint.y - 8.f}];
[path addLineToPoint:(CGPoint){currentPoint.x - 8.f, currentPoint.y + 8.f}];
[path addLineToPoint:(CGPoint){lastPoint.x - 8.f, lastPoint.y + 8.f}];
[path addLineToPoint:(CGPoint){lastPoint.x + 8.f, lastPoint.y - 8.f}];

[[UIColor blackColor] set];
[path fill];

drawingImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

lastPoint = currentPoint;