如何用这种阴影效果在 UIImage 中绘制一个矩形？

Posted 2023-03-13

【中文标题】如何用这种阴影效果在 UIImage 中绘制一个矩形？

【英文标题】：how to draw a rect in UIImage with this shadow effect?

【发布时间】：2013-06-14 04:56:49

【问题描述】：

我想在 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;

我知道它们非常不同。阴影方向和模糊效果。我想知道如何实现这个效果？任何帮助将不胜感激。

【问题讨论】：

你说的是上图中的蓝色小矩形，还是包围整个图像的高亮/阴影大矩形？

投反对票有什么原因吗？

【参考方案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

【参考方案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;