ios - 慢慢淡出 UIBezierPath

Question

我是 iOS 编程的新手，我想在我的绘图应用程序中添加一个消失的荧光笔。目标是允许用户选择荧光笔并在屏幕上圈出一些东西。大约 15 秒后，我希望圆圈淡化并消失，留下原始绘图。我从绘图应用程序教程中获得了一些入门代码。它的工作原理如下——

允许用户通过触摸屏幕画一条线。这是通过在 touches begins/touches moved/touches ended 中构造一个 UIBezierPath 来实现的。每次完成路径时，都会将其绘制到图像上并保存图像。绘制新线条时，它们会添加到背景图像中。撤消/重做堆栈分开保存，以允许用户更正错误。

我尝试在单独的图层中实现淡入淡出路径，并使用 CABasicAnimation 通过更改其不透明度来淡化荧光笔，然后在不透明度达到 0 时移除图层。现在荧光笔是在屏幕上绘图，但一旦用户抬起他/她的手指，它就会立即消失。有什么想法可以使它正确淡出并保留底层图像的撤消/重做堆栈吗？

- (void)drawRect:(CGRect)rect
{
    if(incrementalImage){
        [incrementalImage drawInRect:rect];
    }
    [self.strokeColor setStroke];
    [path setLineWidth:[self.strokeSize floatValue]];
    [path stroke];
}

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

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint p = [touch locationInView:self];
    ctr++;
    pts[ctr] = p;
    if (ctr == 4)
    {
        pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
        [path moveToPoint:pts[0]];
        [path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
        [self setNeedsDisplay];
        // replace points and get ready to handle the next segment
        pts[0] = pts[3];
        pts[1] = pts[4];
        ctr = 1;
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self drawBitmap];
    [self setNeedsDisplay];
    [path removeAllPoints];
    ctr = 0;
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self touchesEnded:touches withEvent:event];
}

- (void)drawBitmap
{
    CABasicAnimation *fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

    UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, 0.0);

    if (!incrementalImage) // first time this is called it shout paint background white
    {
        UIBezierPath *rectpath = [UIBezierPath bezierPathWithRect:self.bounds];
        [[UIColor whiteColor] setFill];
        [rectpath fill];
    }

    // each time through, you should paint the background with the stored background
    if(self.strokeColor)
    [incrementalImage drawAtPoint:CGPointZero];


    // time to branch based on the characteristics of the stroke color.
    // If the stroke has alpha less than 1, the pen is a highlighter and should vanish over time.

    [self.strokeColor getRed:&red green:&green blue:&blue alpha:&alpha];

    if(alpha == 1.0) {
        [imageHistoryArray addObject:UIGraphicsGetImageFromCurrentImageContext()];
        [self.strokeColor setStroke];
        [path stroke];
        incrementalImage = UIGraphicsGetImageFromCurrentImageContext();
    }  else{
        disappearingLayer = [CALayer layer];
        disappearingLayer.frame = self.bounds;
        [self.layer addSublayer:disappearingLayer];
        fadeAnimation.fromValue = [NSNumber numberWithFloat: 0.5];
        fadeAnimation.toValue = [NSNumber numberWithFloat: 0.0];
        fadeAnimation.duration = 15;
        [disappearingLayer addAnimation:fadeAnimation forKey:@"opacity"];
        disappearingLayer.opacity = 0.0;
    }
    UIGraphicsEndImageContext();
}

- (void) undoLastStroke
{
    if([imageHistoryArray count]>0)
    {
        [imageRedoArray addObject:incrementalImage];
        incrementalImage = [imageHistoryArray lastObject];
        [imageHistoryArray removeLastObject];
        [self setNeedsDisplay];
    }
}

- (void) redoStroke
{
    if([imageRedoArray count]>0)
    {
        [imageHistoryArray addObject:incrementalImage];
        incrementalImage = [imageRedoArray lastObject];
        [imageRedoArray removeLastObject];
        [self setNeedsDisplay];
    }
}

我已经使用 CAShapeLayer 解决了这个问题。这是修改后的代码

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self.strokeColor getRed:&red green:&green blue:&blue alpha:&alpha];
    if(alpha > 0.99){
        [self drawBitmap];
    } else{
        [self drawVanishingPath];
    }
    [self setNeedsDisplay];
    [path removeAllPoints];
    ctr = 0;
}


- (void)drawVanishingPath
{
    disappearingLayer = [[CAShapeLayer alloc] init];
    disappearingLayer.strokeColor = self.strokeColor.CGColor;
    disappearingLayer.fillColor = [UIColor clearColor].CGColor;
    disappearingLayer.lineWidth = [self.strokeSize floatValue];
    disappearingLayer.path = path.CGPath;
    [self.layer addSublayer:disappearingLayer];
    [fadeAnimation setValue:disappearingLayer forKey:@"parentLayer"];
    [disappearingLayer addAnimation:fadeAnimation forKey:@"opacity"];
}

花了一些时间才摆脱了笔画中心令人讨厌的阴影。我确定这条路正在被填满。由于颜色的 alpha 小于 1，因此填充和描边一起作用以在路径的中心创建一个较暗的区域。将填充颜色设置为清除解决了这个问题。

Answer 1

这是我经过大量搜索和一些帮助后发现的解决方案。这与我在上面输入的内容相同。我没有意识到我被允许回答我自己的问题。希望这会显示为现在的答案。我还在这段代码中包含了 Matt 的修复。

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self.strokeColor getRed:&red green:&green blue:&blue alpha:&alpha];
    if(alpha > 0.99){
        [self drawBitmap];
    } else{
        [self drawVanishingPath];
    }
    [self setNeedsDisplay];
    [path removeAllPoints];
    ctr = 0;
}


- (void)drawVanishingPath
{
    disappearingLayer = [[CAShapeLayer alloc] init];
    disappearingLayer.strokeColor = self.strokeColor.CGColor;
    disappearingLayer.fillColor = [UIColor clearColor].CGColor;
    disappearingLayer.lineWidth = [self.strokeSize floatValue];
    disappearingLayer.path = path.CGPath;
    [self.layer addSublayer:disappearingLayer];
    [fadeAnimation setValue:disappearingLayer forKey:@"parentLayer"];
    [disappearingLayer addAnimation:fadeAnimation forKey:@"opacity"];
}

花了一些时间才摆脱了笔画中心令人讨厌的阴影。我确定这条路正在被填满。由于颜色的 alpha 小于 1，因此填充和描边一起作用以在路径的中心创建一个较暗的区域。将填充颜色设置为清除解决了这个问题。