ios - 如何 'record' UIBezierPath 能够播放描边绘图路径

Question

在我当前的 iOS 应用程序中，用户可以使用带有平滑路径的 UIBezierPath 用手指绘制；然而这很简单。我想知道的是，当用户抬起手指并更改铅笔颜色时，是否可以记录路径、点以及与路径和点相关的颜色。我的目标是一个播放按钮可以实时播放他们刚刚创建的所有内容，并且可以通过动画加速以防他们花费几分钟绘图。

感谢您的回复。这是我目前用于绘图的代码(不是最好的代码):

@property (nonatomic, strong) UIBezierPath *path;
@property uint ctr;

@end

@implementation DrawViewController
{
    CGPoint pts[4];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    self.ctr = 0;
    UITouch *touch = [touches anyObject];
    pts[0] = [touch locationInView:self.drawImage];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint p = [touch locationInView:self.drawImage];
    self.ctr++;
    pts[self.ctr] = p;

    if (self.ctr == 3)
    {
        pts[2] = CGPointMake((pts[1].x + pts[3].x)/2.0, (pts[1].y + pts[3].y)/2.0);
        [self.path moveToPoint:pts[0]];
        [self.path addQuadCurveToPoint:pts[2] controlPoint:pts[1]];
        //[self.drawImage setNeedsDisplay];
        pts[0] = pts[2];
        pts[1] = pts[3];
        self.ctr = 1;
        dispatch_async(dispatch_get_main_queue(),
        ^{
            UIGraphicsBeginImageContextWithOptions(self.drawImage.bounds.size, NO, 0.0);

            [self.drawImage.image drawAtPoint:CGPointZero];
            [[UIColor colorWithRed:self.red green:self.green blue:self.blue alpha:1.0] setStroke];
            [self.path stroke];
            self.drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();

            [self.path removeAllPoints];
            self.ctr = 0;
        });
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    if (self.ctr == 0)
    {
        [self.path moveToPoint:pts[0]];
        [self.path addLineToPoint:pts[0]];
    }
    else if (self.ctr == 1)
    {
        [self.path moveToPoint:pts[0]];
        [self.path addLineToPoint:pts[1]];
    }
    else if (self.ctr == 2)
    {
        [self.path moveToPoint:pts[0]];
        [self.path addQuadCurveToPoint:pts[2] controlPoint:pts[1]];
    }

    self.ctr = 0;

    dispatch_async(dispatch_get_main_queue(),
    ^{
        UIGraphicsBeginImageContextWithOptions(self.drawImage.bounds.size, NO, 0.0);

        [self.drawImage.image drawAtPoint:CGPointZero];
        [[UIColor colorWithRed:self.red green:self.green blue:self.blue alpha:1.0] setStroke];
        [self.path stroke];
        self.drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        [self.path removeAllPoints];
        self.ctr = 0;
    });
}

Answer 1

我会做的是创建一个自定义对象来表示绘图的单个“部分”。 (我们称它为“BezierSegment”。)快速浏览一下，您似乎正在使用二次贝塞尔曲线段。因此，创建一个对象来保存贝塞尔曲线的 3 个控制点和用于绘制它的颜色。每次绘制新的“段”时，创建这些对象之一并将其添加到段对象的可变数组中。

然后您可以遍历 BezierSegment 对象数组，从每个对象中创建 BezierPath 对象，然后将其绘制到屏幕上以重新创建它。

您还可以保存线条粗细、带有单独笔颜色的可选闭合路径等内容。