how to draw a rect in UIImage with this shadow effect?

Question

I want to draw a rect in UIImage to highlight the area selected.I want the rect effect is like this:

But what i draw is like this:

And my drawing code is as follows:

- (UIImage *)borderImage:(CGRect)rect
{
    UIImage *image;
    UIImage *originImage = page.imageView.image;
    if (originImage) {
        UIGraphicsBeginImageContext(originImage.size);
        [originImage drawInRect:CGRectMake(0,0,originImage.size.width,originImage.size.height)];
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 1.0);
        CGContextAddRect(context,rect);
        CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
        CGContextSetShadowWithColor(context, CGSizeMake(5, 5), 15, [UIColor grayColor].CGColor);
        CGContextStrokeRectWithWidth(context, rect, 10);
        CGContextStrokePath(context);
        image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }
    return image;
}

I know they are very different.the shadow directions and the blur effect. I wonder how to implement this effect? Any help will be appreciated.

Answer 1

You cannot use shadow but can use gradient in rectangle stroke:-------

- (void)viewDidLoad
{
    self.navigationController.navigationBarHidden=true;
    UIImage *image = [UIImage imageNamed:@"Color-Splash-640x960.jpg"];

    UIImage *imgWithRect = [self imageByDrawingCircleOnImage:image];
    UIImageView *imgView=[[UIImageView alloc] initWithImage:imgWithRect];
    [imgView setFrame:self.view.frame];
    [self.view addSubview:imgView];

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (UIImage *)imageByDrawingCircleOnImage:(UIImage *)image
{
    float strokeWidth=10.0f;
    UIGraphicsBeginImageContext(image.size);

    [image drawAtPoint:CGPointZero];

    CGRect rectangle = CGRectMake(60, 100, 200, 200);
    UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();

    UIImage *lImg=[self gradientImageWithSize:CGSizeMake(strokeWidth, rectangle.size.height)];
    UIImage *tImg=[self gradientImageWithSize:CGSizeMake(rectangle.size.height, strokeWidth)];
    UIImage *rImg=[self gradientImageWithSize:CGSizeMake(strokeWidth, rectangle.size.height)];
    UIImage *bImg=[self gradientImageWithSize:CGSizeMake(rectangle.size.width, strokeWidth)];

    UIGraphicsBeginImageContext(self.view.frame.size);

    [retImage drawAtPoint:CGPointMake(0, 0)];
    [lImg drawAtPoint:CGPointMake(rectangle.origin.x, rectangle.origin.y)];
    [tImg drawAtPoint:CGPointMake(rectangle.origin.x+strokeWidth, rectangle.origin.y)];
    [rImg drawAtPoint:CGPointMake(rectangle.origin.x+rectangle.size.width,rectangle.origin.y+strokeWidth)];
    [bImg drawAtPoint:CGPointMake(rectangle.origin.x, rectangle.origin.y+rectangle.size.height)];

    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;

    return retImage;
}


- (UIImage *)gradientImageWithSize:(CGSize)size
{
    CGSize textSize = CGSizeMake(size.width, size.height);
    CGFloat width = textSize.width;
    CGFloat height = textSize.height;

    UIGraphicsBeginImageContext(CGSizeMake(width, height));
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIGraphicsPushContext(context);

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };

    CGFloat components[8] = { 0.0, 1.0, 1.0, 1.0,  // Start color
        1.0, 1.0, 0.0, 1.0 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGPoint topCenter = CGPointMake(0, 0);
    CGPoint bottomCenter = CGPointMake(0, textSize.height);

    CGContextDrawLinearGradient(context, glossGradient, topCenter, bottomCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace);

    // pop context
    UIGraphicsPopContext();

    // get a UIImage from the image context
    UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();

    return gradientImage;
}

To show shadow you can set opacity of rectangle here...

CGFloat components[8] = { 0.0, 1.0, 1.0, 0.2,  // Start color
    1.0, 1.0, 0.0, 0.4 }; // End color

Answer 2

At last, I draw image to implement the shadow effect. which function is as follows:

- (UIImage *)imageByDrawingInRect:(CGRect)rectangle 
{
    UIImage *image = page.imageView.image;
    UIImage *cornerImage = [UIImage imageNamed:@"shadow_corner.png"];
    UIImage *borderImage = [UIImage imageNamed:@"shadow_side.png"];
    // shadow_corner.png is 40X40, shadow_side.png is 53X40.
    UIImage *tImg = [borderImage imageRotatedByDegrees:0];
    UIImage *rImg = [borderImage imageRotatedByDegrees:90];
    UIImage *bImg = [borderImage imageRotatedByDegrees:180];
    UIImage *lImg = [borderImage imageRotatedByDegrees:270];

    UIImage *tlCorner = [cornerImage imageRotatedByDegrees:0];
    UIImage *trCorner = [cornerImage imageRotatedByDegrees:90];
    UIImage *blCorner = [cornerImage imageRotatedByDegrees:270];
    UIImage *brCorner = [cornerImage imageRotatedByDegrees:180];

    UIGraphicsBeginImageContextWithOptions(image.size, YES, image.scale);
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];

    [tlCorner drawAtPoint:CGPointMake(rectangle.origin.x-40, rectangle.origin.y-40)];
    [tImg drawInRect:CGRectMake(rectangle.origin.x,rectangle.origin.y-40, rectangle.size.width, 40)];
    [trCorner drawAtPoint:CGPointMake(rectangle.origin.x + rectangle.size.width , rectangle.origin.y-40)];
    [rImg drawInRect:CGRectMake(rectangle.origin.x + rectangle.size.width, rectangle.origin.y, 40, rectangle.size.height)];
    [brCorner drawAtPoint:CGPointMake(rectangle.origin.x + rectangle.size.width, rectangle.origin.y + rectangle.size.height)];
    [bImg drawInRect:CGRectMake(rectangle.origin.x, rectangle.origin.y + rectangle.size.height, rectangle.size.width, 40)];
    [blCorner drawAtPoint:CGPointMake(rectangle.origin.x - 40, rectangle.origin.y + rectangle.size.height)];
    [lImg drawInRect:CGRectMake(rectangle.origin.x-40, rectangle.origin.y, 40, rectangle.size.height)];

    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;
}