如何在具有此陰影效果的UIImage中繪制矩形？

Question

我想在UIImage中繪制一個矩形以突出顯示所選區域。我想要矩形效果是這樣的：

但是我畫的是這樣的：

我的繪圖代碼如下：

- (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;
}

我知道它們非常不同。陰影方向和模糊效果。 我想知道如何實現這種效果？ 任何幫助將不勝感激。

Answer 1

您不能使用陰影，但可以在矩形筆觸中使用漸變：-------

- (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;
}

要顯示陰影，您可以在此處設置矩形的不透明度...

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

最后，繪制圖像以實現陰影效果。 其功能如下：

- (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;
}