Как я могу добавить размытие с радиусом 2pt в Swift?

Я хочу создать что-то вроде этого:

введите здесь описание изображения

Я пробовал это:

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

но это создает очень темное размытие. Но мне нужно именно темное размытие (черный цвет) с радиусом 2pt.

Могу ли я добиться этого в Swift?


person Doe    schedule 13.08.2016    source источник
comment
UIBlurEffectStyle.Light?   -  person Starlord    schedule 13.08.2016
comment
@Joakim, но это белое пятно. мне нужен черный   -  person Doe    schedule 13.08.2016
comment
показать именно то, что вам нужно.   -  person Dharmesh Kheni    schedule 13.08.2016
comment
@DharmeshKheni Я добавил скриншот. В случае размытия .Dark у меня получилось следующее: .squarespace.com/static/52428a0ae4b0c4a5c2a2cede/t/ , но я хочу намного светлее черного цвета с радиусом 2pt   -  person Doe    schedule 13.08.2016


Ответы (4)


Вы не можете контролировать радиус размытия 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

Дополнительную информацию об этом методе и более надежный рабочий пример можно найти здесь. требует высокой производительности.

person beyowulf    schedule 13.08.2016

Радиус размытия можно изменить с помощью частного API ios. У меня есть для вас решение: 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)
person Dmitrii Kononets    schedule 10.09.2020

Вот простой выход, если вы используете раскадровку. Сначала вам нужно добавить «Просмотр визуальных эффектов с размытием» из раскадровки прямо над тем местом, где должно быть видно ваше изображение, UIUiew или uielement. Теперь нарисуйте выход окна визуальных эффектов следующим образом:

 @IBOutlet weak var blurredViewVisulaEffect: UIVisualEffectView!

и добавьте эти две строки в метод viewDidLoad

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

МАНИПУЛЯЦИЯ представления, чтобы сделать его в соответствии с нашими требованиями:- Теперь, если вы хотите настроить размытость изображения, измените значение альфы UIVisualEffectView из раскадровки. Держите значение Alpha в пределах от 0,5 до 0,8, чтобы получить желаемую размытость. И если вы хотите изменить оттенок/цвет представления, как вы упомянули, между светлым и темным, вам нужно установить цвет фона вашего UIVisualEffectView на черный и изменить его непрозрачность со 100% на 30% (или может быть 40 по мере необходимости).

Затем установите границу представления на 2 пикселя следующим образом в вашем viewDidLoad()

blurredImageViewVisulaEffect.layer.borderColor = UIColor.grayColor().CGColor;
blurredImageViewVisulaEffect.layer.borderWidth = 2.0 
person Ishika    schedule 16.08.2016
comment
Apple настоятельно рекомендует не изменять альфа-канал UIVisualEffectView. - person slider; 13.09.2017
comment
@chicobermuda — Apple дает этот совет, потому что меньшая альфа ... приводит к тому, что многие эффекты выглядят неправильно или вообще не отображаются. Обратите внимание, что они не говорят, что все эффекты есть проблема с такими альфами - возможно, это не проблема с UIBlurEffect? - person ToolmakerSteve; 05.01.2020

Чтобы сделать радиус для UIVisualEffectView, попробуйте это:

 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  

person mohammed.r.ghate    schedule 19.03.2018
comment
Добро пожаловать в stackoverflow.com. Вы показываете, как задать радиус угла. Это не имеет ничего общего с текущим вопросом, а именно, как контролировать радиус эффекта размытия, то есть количество (независимых от устройства) пикселей, по которым распространяется размытие. - person ToolmakerSteve; 05.01.2020
comment
ПРИМЕЧАНИЕ. В вашем ответе внизу слева должна быть возможность удалить его. Поскольку ваш ответ не имеет отношения к этому вопросу, вы можете удалить его, чтобы удалить отрицательный голос. (Независимо от того, не принимайте отрицательный голос лично - это просто для того, чтобы подтолкнуть этот ответ ниже других ответов, которые могут быть более полезными.) - person ToolmakerSteve; 05.01.2020