Question

如何为标签添加模糊视图？标签位于UIImage前面，我希望标签的背景模糊，以便用户可以更好地阅读文本。我在标签的边界内得到了模糊效果，但是文本本身消失了（可能也会变得模糊，为什么会这样）。我还试图以编程方式添加标签，但我没有让它工作。我感谢任何帮助！

let blur = UIBlurEffect(style: .Light)
    let blurView = UIVisualEffectView(effect: blur)

    blurView.frame = findATeamLabel.bounds
    findATeamLabel.addSubview(blurView)

Answer 1

您可以创建自己的BlurredLabel ，以使其文本模糊/模糊。通过CoreImage模糊过滤器，您可以获取标签的文本，使其在图像中模糊化，然后将该图像显示在标签的顶部。

class BlurredLabel: UILabel {

    func blur(_ blurRadius: Double = 2.5) {        
        let blurredImage = getBlurryImage(blurRadius)
        let blurredImageView = UIImageView(image: blurredImage)
        blurredImageView.translatesAutoresizingMaskIntoConstraints = false
        blurredImageView.tag = 100
        blurredImageView.contentMode = .center
        blurredImageView.backgroundColor = .white
        addSubview(blurredImageView)
        NSLayoutConstraint.activate([
            blurredImageView.centerXAnchor.constraint(equalTo: centerXAnchor),
            blurredImageView.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    func unblur() {
        subviews.forEach { subview in
            if subview.tag == 100 {
                subview.removeFromSuperview()
            }
        }
    }

    private func getBlurryImage(_ blurRadius: Double = 2.5) -> UIImage? {
        UIGraphicsBeginImageContext(bounds.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        guard let image = UIGraphicsGetImageFromCurrentImageContext(),
            let blurFilter = CIFilter(name: "CIGaussianBlur") else {
            UIGraphicsEndImageContext()
            return nil
        }
        UIGraphicsEndImageContext()

        blurFilter.setDefaults()

        blurFilter.setValue(CIImage(image: image), forKey: kCIInputImageKey)
        blurFilter.setValue(blurRadius, forKey: kCIInputRadiusKey)

        var convertedImage: UIImage?
        let context = CIContext(options: nil)
        if let blurOutputImage = blurFilter.outputImage,
            let cgImage = context.createCGImage(blurOutputImage, from: blurOutputImage.extent) {
            convertedImage = UIImage(cgImage: cgImage)
        }

        return convertedImage
    }
}

PS：请确保根据您的要求改进此组件（例如，如果已经模糊，请避免模糊，或者可以删除当前的模糊，如果文本已更改，请再次应用模糊）。

PSPS：还要考虑对某物应用模糊会使内容流血，因此请将clipsToBounds = false设置为BlurredLabel或找出其他方法来完成您的操作视觉效果以避免模糊的图像看起来与以前的标签未模糊文本不在同一位置。

要使用它，您只需创建一个BlurredLabel：

let blurredLabel = BlurredLabel()
blurredLabel.text = "56.00 €"

点击某些按钮，也许可以实现blurredLabel.blur()起的模糊效果，而blurredLabel.unblur()则不模糊。

这是blur()通过blurRadius达到2.5所获得的输出：

要了解有关高斯模糊的更多信息，请在Wikipedia上找到一篇不错的文章：https://en.wikipedia.org/wiki/Gaussian_blur

Answer 2

您可以尝试将其发送到标签的视图层次结构的后面。尝试

findATeamLabel.sendSubviewToBack(blurView)

Answer 3

我通过在标签后面添加一个View来实现它（标签不在该视图中，就在它前面）。然后我将模糊效果添加到视图中......我仍然认为应该有一种更简单的方法。

添加模糊视图到标签？

3 个答案: