Question

I am working on an app that has a steamed up view that the user can wipe away with their finger. I took a crack at it with something that I hoped would work, and it does but it’s super slow. The code below combines drawing code and masking code. The drawing code draws to a black and white image that is then used as a mask to mask out the fog image.

Does anyone know of any sample code to achieve this effect, or have any suggestions on how to make it faster?

static CGPoint midPoint(CGPoint p1, CGPoint p2){
    return CGPointMake((p1.x+p2.x)*0.5f, (p1.y+p2.y)*0.5f);
}

- (UIImage *)maskImage:(UIImage *)image withMask:(UIImage *)maskImage{
    CGImageRef maskRef = [maskImage CGImage];
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);
    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
    CGImageRelease(mask);
    UIImage *maskedImage = [UIImage imageWithCGImage:masked];
    CGImageRelease(masked);
    return maskedImage;

}

- (void)setMaskImage:(UIImage *)maskImage{
    [_maskImage release];
    _maskImage = [maskImage retain];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];

    _previousPoint1 = [touch previousLocationInView:self];
    _previousPoint2 = [touch previousLocationInView:self];
    _currentPoint = [touch locationInView:self];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];

    _previousPoint2 = _previousPoint1;
    _previousPoint1 = [touch previousLocationInView:self];
    _currentPoint = [touch locationInView:self];

    CGPoint mid1 = midPoint(_previousPoint1, _previousPoint2); 
    CGPoint mid2 = midPoint(_currentPoint, _previousPoint1);

    CGRect imageRect = CGRectZero;
    imageRect.size = _fogView.frame.size;
    UIGraphicsBeginImageContext(imageRect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [_maskImage drawInRect:imageRect];

    CGContextMoveToPoint(context, mid1.x, mid1.y);
    CGContextAddQuadCurveToPoint(context, _previousPoint1.x, _previousPoint1.y, mid2.x, mid2.y); 

    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 40.0f);
    CGContextSetRGBStrokeColor(context, 1.0f, 1.0f, 1.0f, 1.0f);
    CGContextStrokePath(context);

    [self setMaskImage:UIGraphicsGetImageFromCurrentImageContext()];
    UIGraphicsEndImageContext();

    _fogView.image = [self maskImage:[UIImage imageNamed:@"Fog"] withMask:_maskImage];
}

Answer 1

With help from @badeen the solution was to use two CALayers, one for the fog image and one for the mask, the mask is drawn into when the user moves their finger around the screen.