3

我是斯威夫特的新手。我使用高斯模糊效果在 Sketch 中创建了模糊的 UI：

在此处输入图像描述

现在我想在 UIImageView 中实现这个效果。

是否可以使用模糊或 CIFilter 的视觉效果来达到相同的效果？（我试过但没有得到它。可能是我错过了一些东西）

更新：

好的.. 感谢@firstinq。我打开他的链接，意识到我使用的是 kCIInputRadiusKey 而不是 inputRadius。现在我在模拟器上取得了成功，但在真正的 iOS 设备上，它仍然一团糟。

这是模拟器（iPhone SE）中的屏幕截图：

在此处输入图像描述

但在真正的 iOS 设备（iPhone SE）中：

在此处输入图像描述

这是我的模糊图像代码：

   func applyBlurEffect(image: UIImage) -> UIImage{
    let imageToBlur = CIImage(image: image)
    let blurfilter = CIFilter(name: "CIGaussianBlur")
    blurfilter?.setValue(imageToBlur, forKey: "inputImage")
    blurfilter?.setValue(13.4, forKey: "inputRadius")
    let resultImage = blurfilter?.value(forKey: "outputImage") as! CIImage
    let blurredImage = UIImage(ciImage: resultImage)
    return blurredImage
}

我在 collectionView 项目中使用了两个图像。一个图像是模糊的，在它上面，另一个是完全可见的。模糊图像为 125x125 大小（高斯模糊会减小此大小）。可见图像大小为 50x50。两个图像都有圆角半径，使它们成为圆形。

4

1 回答 1

1

我不知道这是否是您想要的，但高斯模糊实际上需要整个图像来制作一个新图像。鉴于此，我假设您只想要来自 imageView 的内容视图的裁剪图像。所以，首先你必须从你的视图中捕获图像：（我建议使用 UIView 的扩展）

public static func image(from view: UIView) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0)
    defer { UIGraphicsEndImageContext() }
    if let context = UIGraphicsGetCurrentContext() {
        view.layer.render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        return image
    }
    return nil
}

所以，现在你有了想要的图像，这次我们应该对它进行高斯模糊：（再次，我更喜欢使用扩展，但这次是 UIImage ）

func getImageWithBlur() -> UIImage?{
    let context = CIContext(options: nil)

    guard let currentFilter = CIFilter(name: "CIGaussianBlur") else {
        return nil
    }
    let beginImage = CIImage(image: self)
    currentFilter.setValue(beginImage, forKey: kCIInputImageKey)
    currentFilter.setValue(6.5, forKey: "inputRadius")
    guard let output = currentFilter.outputImage, let cgimg = context.createCGImage(output, from: output.extent) else {
        return nil
    }
    return UIImage(cgImage: cgimg)
}

然后你可以设置另一个 UIImageView，它的 zPosition 比前面的 UIImageView 更小，并且前面 UIImageView 的比例要大一点。

我也遇到了这个问题，我能够正确地得到这个效果，但是打印方法太贵了，它会减慢你在集合/表格视图中的滚动速度。所以我无法在我的项目中使用它，但请随意在你的项目中尝试！

于 2018-06-19T05:52:34.250 回答