如何在 Swift 中添加半径为 2pt 的模糊？

Question

我想创建类似的东西：

我试过这个：

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
var blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
view.addSubview(blurEffectView)

但这会产生非常暗的模糊。但我需要半径为 2pt 的完全暗模糊（黑色）。

我可以在 Swift 中实现吗？

Answer 1

您无法控制UIVisualEffectView 的模糊半径。您可以通过对要模糊的视图进行快照并将 CoreImage 的“CIGaussianBlur”过滤器应用于该快照然后在您要模糊的视图正上方的UIImageView 中显示模糊图像来实现您想要的。使用CIGaussianBlur，您可以将模糊半径应用于任意长度。

您可以在UIView 上使用扩展名以使其更方便：

extension UIView
{
    func snapshotView(scale scale: CGFloat = 0.0, isOpaque: Bool = true) -> UIImage
    {
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, opaque, scale)
        self.drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }

    func blur(blurRadius blurRadius: CGFloat) -> UIImage?
    {
        guard let blur = CIFilter(name: "CIGaussianBlur") else { return nil }

        let image = self.snapshotView(scale: 1.0, isOpaque: true)
        blur.setValue(CIImage(image: image), forKey: kCIInputImageKey)
        blur.setValue(blurRadius, forKey: kCIInputRadiusKey)

        let ciContext  = CIContext(options: nil)

        let result = blur.valueForKey(kCIOutputImageKey) as! CIImage!

        let boundingRect = CGRect(x: 0,
                                  y: 0,
                                  width: frame.width,
                                  height: frame.height)

        let cgImage = ciContext.createCGImage(result, fromRect: boundingRect)

        return UIImage(CGImage: cgImage)
    }
}

然后你可以添加一个半透明的叠加层来判断模糊的深浅，例如：

let overlay = UIView()
overlay.frame = view.bounds
overlay.backgroundColor = UIColor(white: 0.0, alpha: 0.30)
viewIWantToBlur.addSubview(overlay)
let image = viewIWantToBlur.blur(blurRadius: 2.0)
imageView.image = image

有关此方法的更多信息和更强大的工作示例，您可以查看here. 您应该知道这是性能密集型的。

Answer 2

可以使用 ios 私有 API 更改模糊半径。我有一个解决方案给你： https://github.com/perfectdim/CustomBlurEffectView

用法：

import CustomBlurEffectView

let customBlurEffectView = CustomBlurEffectView(
    radius: 20, // Set blur radius value. Defaults to `10` (CGFloat)
    color: .cyan, // Set tint color value. Defaults to `nil` (UIColor?)
    colorAlpha: 0.4 // Set tint color alpha value. Defaults to `0.8` (CGFloat)
)
customBlurEffectView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
addSubview(customBlurEffectView)

Answer 3

如果您使用的是故事板，这是一个简单的方法。 首先，您需要从情节提要的正上方添加一个“Visual Effect View with Blur”，您可以在其中看到您的图像、UIUiew 或 uielement。 现在画出视觉效果视图的出口如下：-

 @IBOutlet weak var blurredViewVisulaEffect: UIVisualEffectView!

并在 viewDidLoad 方法中添加这两行

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
blurredViewVisulaEffect.effect = blurEffect

根据我们的要求操作视图：- 现在如果你想自定义图像的模糊度，那么从storyboard中改变UIVisualEffectView的alpha值。保持Alpha的值在0.5到0.8之间以获得想要的模糊度. 如果您想更改视图的阴影/颜色，正如您在明暗之间提到的，那么您需要将 UIVisualEffectView 的背景颜色设置为黑色并将其 opacity 从 100% 更改为30%（或根据需要为 40）。

然后在 viewDidLoad() 中将视图的边框设置为 2 px，如下所示

blurredImageViewVisulaEffect.layer.borderColor = UIColor.grayColor().CGColor;
blurredImageViewVisulaEffect.layer.borderWidth = 2.0