如何在 Swift 中的动态相机视图上方添加具有自定义形状的模糊遮罩？

Question

我正在使用 Swift 开发具有相机功能的 iOS 应用程序，它需要在相机视图上方有一个模糊层，中间有一个孔，如下图所示。

我尝试了几种方法，但是none其中添加了模糊效果而没有覆盖孔。在 Google 上花费时间后，我也没有找到可行的解决方案。

任何人都可以提供一些提示，说明如何只模糊附加到图像视图的 png 图像的非透明部分吗？

我尝试过的方法：

使用内置的iOS 8 模糊效果

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
maskImage.addSubview(blurEffectView)

使用"CIGaussianBlur"过滤器

var imageToBlur = CIImage(image: image)
var blurfilter = CIFilter(name: "CIGaussianBlur")
blurfilter.setValue(imageToBlur, forKey: "inputImage")
var resultImage = blurfilter.valueForKey("outputImage") as! CIImage
var blurredImage = UIImage(CIImage: resultImage)
self.maskImage.image = blurredImage

我想要的视觉效果：

Answer 1

我通过创建一个覆盖层来完成此操作，该层具有所述模糊图像，然后使用从一直围绕范围的路径构建的蒙版，然后跳转到切口孔，与缠绕填充规则相反的方向。

在此处参考文档：

https://developer.apple.com/library/ios/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html

虽然有很多这样的记录示例，但这里是一个： drawing with clear color on UIView (cutting a hole) in static method

Answer 2

将模糊应用于图像中某些圆形区域之外的最简单方法，我们可以应用高斯模糊和渐变蒙版。 Here Apple 上有一个 post。

执行此操作的基本常见步骤：

使用 CIRadialGradient 创建遮罩滤镜（在此处调整您的圆心）

guard let radialMask = CIFilter(name:"CIRadialGradient") else {
   return nil
}

let h = inputImage.extent.size.height
let w = inputImage.extent.size.width

// Adjust your circular hole position here
let imageCenter = CIVector(x:0.55 * w, y:0.6 * h)
radialMask.setValue(imageCenter, forKey:kCIInputCenterKey)
// Small fraction of the image's dimension (high sharp)
radialMask.setValue(0.2 * h, forKey:"inputRadius0")
// Large fraction of the image's dimension (lower sharp)
radialMask.setValue(0.3 * h, forKey:"inputRadius1")
radialMask.setValue(CIColor(red:0, green:1, blue:0, alpha:0), 
                    forKey:"inputColor0")
radialMask.setValue(CIColor(red:0, green:1, blue:0, alpha:1), 
                    forKey:"inputColor1")

创建 CIMaskedVariableBlur 以屏蔽模糊区域

guard let maskedVariableBlur = CIFilter(name:"CIMaskedVariableBlur") else {
   return nil
}
// inputImage:- Your original image
maskedVariableBlur.setValue(inputImage, forKey: kCIInputImageKey)
// inputRadiusKey:- Right degree of blur desired
maskedVariableBlur.setValue(10, forKey: kCIInputRadiusKey)
// here we will use result of radialMask filter result image
maskedVariableBlur.setValue(radialMask.outputImage, forKey: "inputMask")
// Get result image
let selectivelyFocusedCIImage = maskedVariableBlur.outputImage
// Convert your result image to UIImage
let resultImage = UIImage(ciImage: selectivelyFocusedCIImage)

额外:- 你可以使用UIPanGestureRecognizer移动你的圆孔

1- 创建手势识别器：

lazy var panGesture: UIPanGestureRecognizer = {
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handleDrag))
    return panGesture
}()

2- 将手势识别器添加到图像视图

self.imageView.isUserInteractionEnabled = true
self.imageView.addGestureRecognizer(panGesture)

3- 处理你的手势

var initialCenter = CGPoint()
@objc fileprivate func handleDrag(_ gestureRecognizer: UIPanGestureRecognizer) {
  guard gestureRecognizer.view != nil else {return}

  let translation = gestureRecognizer.translation(in: imageView.superview)

  if gestureRecognizer.state == .began {
      // Save the view's original position.
      self.initialCenter = CGPoint(x: centerVector.x, y: centerVector.y)
  }
  // Update the position for the .began, .changed, and .ended states
  if gestureRecognizer.state != .cancelled {
      // Add the X and Y translation to the view's original position.
      let newCenter = CGPoint(x: initialCenter.x + translation.x, y: initialCenter.y + -translation.y)
    
    
      self.imageCenter = CIVector.init(cgPoint: newCenter)
      // Then apply your filter on gestureRecognizer.state == .end
    
  } else {
      // On cancellation, return the piece to its original location.
      self.imageCenter = CIVector(x: initialCenter.x, y: initialCenter.y)
  }
}

如何在 Swift 中的动态相机视图上方添加具有自定义形状的模糊遮罩？

How to add a blur mask with a custom shape above a dynamic camera view in Swift?

camera

blur

ios

swift