Question

我对iOS编程比较陌生，我正在尝试为我的绘图应用添加消失的荧光笔。目标是允许用户选择荧光笔并在屏幕上圈出一些东西。大约15秒后，我希望圆圈消失并消失，留下原始图纸。我从绘图应用教程中获得了一些入门代码。它的工作原理如下 -

允许用户通过触摸屏幕绘制线条。这是通过在触摸开始/触摸移动/触摸结束时构建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，因此填充和笔划共同作用以在路径的中心创建较暗的区域。将填充颜色设置为清除可解决此问题。

Answer 2

你的动画没有发生的原因，而是图层瞬间消失的原因是：

[disappearingLayer addAnimation:fadeAnimation forKey:@"opacity"];
disappearingLayer.opacity = 0.0; // this line is the problem

第二行是取消动画并立即将不透明度设置为零。剪切它（或在构造动画之前将其移动到），以便动画可以运行。

慢慢淡化UIBezierPath

2 个答案: