为什么UIView图层顶部的模糊CALayer会使视图显示通过？

编程问答 2022-11-13

问题描述

我一直在寻找UIVisualEffectView模糊效果的替代方法，该方法可以让我改变模糊半径。我曾考虑过使用Core Image滤镜自己创建变量模糊。但是，我对Core图像过滤器还有些不熟悉。 （我最后一次使用它们是在Objective-C中。）

我在SO上找到了这个答案，它提供了UIView的扩展，可捕获视图及其子视图的合成内容，生成模糊版本，并将其作为图像视图添加到视图顶部：{{3} }

我决定将其修改为UIView的自定义子类，从而在视图层的顶部添加模糊层。

结果是，模糊层的内容大部分是透明的，并且不会使基础视图变得非常模糊。我在视图中添加了一个图像视图，它的内容似乎一点也不模糊。

https://stackoverflow.com/a/56521521/205185到我创建的项目。

生成模糊图像时，我都将其安装为视图图层顶部的图层内容，并将其复制到下面的单独图像视图中。单独的图像视图看起来完全像我想要的结果，但是顶部位于图层上的视图几乎没有可见的变化。通常，下面的原始图像会显示出来。

原始的合成视图如下：

Here is a link

在下面的屏幕截图中，顶部图像是合成图像，其中模糊层位于顶部（模糊半径10），底部图像是安装在单独图像视图中的模糊输出：

enter image description here

您可以从图像视图版本中看到模糊图像是完全不透明的。绿色背景随处可见。视图控制器的白色背景都不会渗出。但是，在顶部的自定义视图中，模糊层位于顶部，文本的清晰边缘以及图像视图和蓝框视图上的边框仍然可见。顶部模糊层的BlurView外观几乎没有变化。为什么？

BlurView类中的两个关键功能如下：

func applyBlur() {
    let context = CIContext(options: nil)
    self.makeBlurredImage(with: blurLevel,context: context,completed: { processedImage in
        self.blurLayer.contents = processedImage.cgImage
        self.updateBlurImage?(processedImage)
    })
}

private func makeBlurredImage(with level: CGFloat,context: CIContext,completed: @escaping (UIImage) -> Void) {
    // screen shot
    layer.isOpaque = true

    UIGraphicsBeginImageContextWithOptions(self.frame.size,false,1)
    self.layer.render(in: UIGraphicsGetCurrentContext()!)
    let resultimage = UIGraphicsGetimageFromCurrentimageContext()!
    UIGraphicsEndImageContext()
    let beginImage = CIImage(image: resultimage)


    //Clamp the image
    guard let clampFilter = CIFilter(name: "CIAffineClamp") else {
        fatalError()
    }
    clampFilter.setValue(beginImage,forKey: kCIInputimageKey)
    clampFilter.setValue(CGAffineTransform.identity,forKey: kCIInputTransformKey)
    var output = clampFilter.outputimage

    let blurFilter = CIFilter(name: "CIGaussianBlur")!
    blurFilter.setValue(level,forKey: kCIInpuTradiusKey)
    blurFilter.setValue(output,forKey: kCIInputimageKey)


    let cropFilter = CIFilter(name: "CICrop")!
    cropFilter.setValue(blurFilter.outputimage,forKey: kCIInputimageKey)
    cropFilter.setValue(CIVector(cgRect: beginImage!.extent),forKey: "inputRectangle")

    output = cropFilter.outputimage
    var cgimg: CGImage?
    var extent: CGRect?

    let global = dispatchQueue.global(qos: .userInteractive)

    global.async {
        extent = output!.extent
        cgimg = context.createCGImage(output!,from: extent!)!
        let processedImage = UIImage(cgImage: cgimg!)

        dispatchQueue.main.async {
            completed(processedImage)
        }
    }
}

makeBlurredImage()函数异步运行，并在模糊图像可用时调用闭包。

applyBlur()函数调用makeBlurredImage()，并且传递的闭包将生成的模糊图像安装在BlurView内容层顶部的层中。

我希望BlurView的外观与下面的图像视图的外观完全一样。我很困惑。

解决方法

我找到了解决方案，但不清楚为什么我项目中的代码会表现出我描述的行为。

我在视图的frame属性上有一个didSet方法，用于设置图层的边界。这样就可以适应旋转和调整大小。

我将模糊层设置为懒惰变量。该代码如下所示：

lazy var blurLayer: CALayer = {
    let newLayer = CALayer()
    self.layer.addSublayer(newLayer)
    newLayer.isOpaque = true
    return newLayer
}()

override var frame: CGRect {
    didSet {
        blurLayer.frame = self.bounds
    }
}

似乎在将视图添加到视图层次结构之前已设置框架，因此在设置框架时将图层添加为子图层会使事情变得混乱。如果我更改了惰性var blurLayer以删除添加子层：

lazy var blurLayer: CALayer = {
    let newLayer = CALayer()
    //self.layer.addSublayer(newLayer)
    //newLayer.isOpaque = true
    return newLayer
}()

然后在awakeFromNib()中进行操作，它将起作用：

override func awakeFromNib() {
    self.layer.addSublayer(blurLayer)
    blurLayer.isOpaque = true
    applyBlur()
}

正如我所说，我不清楚原因为何，但它行得通。

calayercalayercalayercore-imageiosiosswiftswiftswiftswift