UIImage masking with gesture

Question

I'm trying to achieve selective color feature in iOS. I personally think that first draw shape using finger gesture and convert that into mask, But at the same time it should be real time, It should work as i move my finger across the grayscale image. Can anyone direct me to correct path.

Sample app : https://itunes.apple.com/us/app/color-splash/id304871603?mt=8

Thanks.

Lashelllasher

Answer 1

You can position two UIImageViews over each other, the color version in the background and the black&white version in the foreground.

Then you can use touchesBegan, touchesMoved and so on events to track user input. In touches moved you can "erase" a path that the user moved the finger along like this (self.foregroundDrawView is the black&white UIImageView):

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

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetBlendMode(context, kCGBlendModeClear);
    CGContextSetAllowsAntialiasing(context, TRUE);
    CGContextSetLineWidth(context, 85);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1.0);
    // Soft edge ... 5.0 works ok, but we try some more
    CGContextSetShadowWithColor(context, CGSizeMake(0.0, 0.0), 13.0, [UIColor redColor].CGColor);

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, touchLocation.x, touchLocation.y);
    CGContextAddLineToPoint(context, currentLocation.x, currentLocation.y);

    CGContextStrokePath(UIGraphicsGetCurrentContext());

    self.foregroundDrawView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

The important part is CGContextSetBlendMode(context, kCGBlendModeClear);. This erases the traced part from the image, afterwards the image is set back as the image of the foreground image view.

When the user is done you should be able to combine the two images or use the black&white image as a mask.

Sensualism