如何绘制模糊形状？

Question

我想画一个像这样的形状

我知道画圆的代码。但我不知道如何制作褪色尺寸：

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetShouldAntialias(c, YES);

    // Fill background
    CGContextSetFillColorWithColor(c, [UIColor colorWithWhite:1 alpha:1].CGColor);
    CGContextAddRect(c, CGRectMake(0, 0, rect.size.width, rect.size.height));
    CGContextFillPath(c);

    // Dark inside
    if (_type == LDConstrainTypeCircle) {
        CGContextAddEllipseInRect(c, self.blurRect);
        CGContextClip(c);
    }
    CGContextSetFillColorWithColor(c, [UIColor blackColor].CGColor);
    CGContextAddRect(c, self.blurRect);
    CGContextFillPath(c);
}

如何制作这样的图像。我的项目针对 iOS 7.0 及更高版本。谢谢！

Answer 1

您可以参考this blog。

此博客为您提供了三种模糊视图的选项。

1. 使用 Core Image 框架进行模糊处理
2. 使用 Brad Larson 的 GPUImage 框架进行模糊处理
3. 使用 Apple 的 UIImage+ImageEffects 类别进行模糊处理

---

1. 使用 Core Image 框架进行模糊处理

   -(UIImage *)blurWithCoreImage:(UIImage *)sourceImage
   {
   CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage];
   
   // Apply Affine-Clamp filter to stretch the image so that it does not
   // look shrunken when gaussian blur is applied
   CGAffineTransform transform = CGAffineTransformIdentity;
   CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
   [clampFilter setValue:inputImage forKey:@"inputImage"];
   [clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"];
   
   // Apply gaussian blur filter with radius of 30
   CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
   [gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"];
   [gaussianBlurFilter setValue:@30 forKey:@"inputRadius"];
   
   CIContext *context = [CIContext contextWithOptions:nil];
   CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]];
   
   // Set up output context.
   UIGraphicsBeginImageContext(self.view.frame.size);
   CGContextRef outputContext = UIGraphicsGetCurrentContext();
   
   // Invert image coordinates
   CGContextScaleCTM(outputContext, 1.0, -1.0);
   CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height);
   
   // Draw base image.
   CGContextDrawImage(outputContext, self.view.frame, cgImage);
   
   // Apply white tint
   CGContextSaveGState(outputContext);
   CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor);
   CGContextFillRect(outputContext, self.view.frame);
   CGContextRestoreGState(outputContext);
   
   // Output image is ready.
   UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   
   return outputImage;
   }
   

---

1. 使用 Brad Larson 的 GPUImage 框架进行模糊处理

GPUImage 是一个用于图像和视频处理的开源 iOS 框架，由 Brad Larson 创建和维护。它包括一组 GPU 加速的过滤器，可应用于图像、实时摄像机视频和电影。

GPUImage framework 包含在本教程的源文件中，但是将框架添加到您自己的项目中非常容易：

1. 首先从下载框架或克隆存储库 GitHub。
2. 打开终端窗口，导航到 GPUImage 文件夹，然后运行 构建脚本 build.sh 来编译框架。
3. 将 GPUImage.framework 从 build 文件夹复制到项目的 文件夹，然后将其拖放到项目导航器中。
4. 然后您可以通过导入在您的项目中使用 GPUImage 框架 框架标题，#import <GPUImage/GPUImage.h>.

GPUImage 框架包含类似于 Core Image 框架中的过滤器。对于我们的示例应用程序，我们对两个过滤器感兴趣，GPUImageGaussianBlurFilter 和 GPUImageiOSBlurFilter。

-(UIImage *)blurWithGPUImage:(UIImage *)sourceImage
{
    // Gaussian Blur
    GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
    blurFilter.blurRadiusInPixels = 30.0;

    return [blurFilter imageByFilteringImage: sourceImage];
}

除了GPUImageGaussianblur 类，您还可以像这样使用GPUImageiOSblur 类：

// iOS 模糊

GPUImageiOSBlurFilter *blurFilter = [[GPUImageiOSBlurFilter alloc] init];
blurFilter.blurRadiusInPixels = 30.0;

---

1. 使用 Apple 的 UIImage+ImageEffects 类别进行模糊处理

您可以从 Apple 的开发者网站下载 Apple 的 ImageEffects 示例项目并将其用于您的项目中。

#import "UIImage+ImageEffects.h"

...

- (UIImage *)blurWithImageEffects:(UIImage *)image
{
    return [image applyBlurWithRadius:30 tintColor:[UIColor colorWithWhite:1 alpha:0.2] saturationDeltaFactor:1.5 maskImage:nil];
}

希望这会对您有所帮助。 快乐编码。 :-)

Answer 2

对于 iOS 8.0+，在您的 UIImageView 上使用 UIVisualEffectView

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    
visualEffectView.frame = imageView.bounds
imageView.addSubview(visualEffectView)

Answer 3

您可以截取该特定元素的屏幕截图并对其进行模糊处理

func captureScreenshot() -> UIImage {

    UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
    self.layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image!

}

func addBlurEffect() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = self.bounds

    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
    self.addSubview(blurEffectView)

    UIView.animate(withDuration: 0.5) { 
        blurEffectView.effect = UIBlurEffect(style: UIBlurEffectStyle.light)
    }
}