How can I add blur with 2pt of radius in Swift?

问题

I want to create something like that:

I've tried this one:

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

but this creates very dark blur. But I need exactly dark blur(black color) with 2pt of radius.

Can I achieve that in Swift?

回答1:

You can't control the radius of the blur of a UIVisualEffectView. You can achieve what you want by snapshotting the view you want to blur and applying a CoreImage's "CIGaussianBlur" filter to that snapshot then displaying the blurred image in a UIImageView placed directly above the view you want to blur. With CIGaussianBlur you can apply a blur radius to an arbitrary length.

You can use an extension on UIView to make this more convenient:

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)
    }
}

Then you can add a semi transparent overlay to determine how dark the blur is, for example:

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

For more information on this method and a more robust working example you can see here. You should be aware that this is performance intensive.

回答2:

Here is an easy way out if you are using a storyboard. First you need to add a "Visual Effect View with Blur" from storyboard right above where your image,UIUiew or uielement is to be seen. Now draw the outlet of the Visual effect view as follows:-

 @IBOutlet weak var blurredViewVisulaEffect: UIVisualEffectView!

and add these two lines in the viewDidLoad method

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

MANIPULATION of the view to make it according to our requirement:- Now if you want to customise the blurriness of the image, then change the value of alpha of UIVisualEffectView from storyboard.Keep the value of Alpha within 0.5 to 0.8 to obtain desired blurriness. And if you want to change the shade/color of the view, as mentioned by you between light and dark then you need to set the background color of your UIVisualEffectView to black and change its opacity from 100% to 30%(or may be 40 as required).

Then set the border of the view to 2 px as follows in your viewDidLoad()

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

回答3:

For making radius for UIVisualEffectView ,Tryout this :

 blurEffectView.clipsToBounds = true

then specify Radius :

blurEffectView.layer.cornerRadius = 20 
blurEffectView.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor
blurEffectView.layer.borderWidth = 2

来源：https://stackoverflow.com/questions/38935214/how-can-i-add-blur-with-2pt-of-radius-in-swift

标签

ios

swift

uiblureffect