是否将模糊视图添加到标签?

j7dteeu8  于 2022-10-31  发布在  Swift
关注(0)|答案(5)|浏览(303)

如何给标签添加模糊视图?标签位于UIImage前面,我希望标签的背景变得模糊,以便用户更好地阅读文本。我在标签边界内获得了模糊效果,但文本本身消失了(也许也会变得模糊,我不知道为什么)。我也试着用编程的方式添加一个标签,但是我没有让它工作。我感谢任何形式的帮助!

  1. let blur = UIBlurEffect(style: .Light)
  2. let blurView = UIVisualEffectView(effect: blur)
  3. blurView.frame = findATeamLabel.bounds
  4. findATeamLabel.addSubview(blurView)
nue99wik

nue99wik1#

您可以创建自己的BlurredLabel,它可以模糊/取消模糊标签文本。通过CoreImage模糊滤镜,您可以获取标签文本,将其模糊为图像,然后在标签顶部显示该图像。

  1. class BlurredLabel: UILabel {
  2. func blur(_ blurRadius: Double = 2.5) {
  3. let blurredImage = getBlurryImage(blurRadius)
  4. let blurredImageView = UIImageView(image: blurredImage)
  5. blurredImageView.translatesAutoresizingMaskIntoConstraints = false
  6. blurredImageView.tag = 100
  7. blurredImageView.contentMode = .center
  8. blurredImageView.backgroundColor = .white
  9. addSubview(blurredImageView)
  10. NSLayoutConstraint.activate([
  11. blurredImageView.centerXAnchor.constraint(equalTo: centerXAnchor),
  12. blurredImageView.centerYAnchor.constraint(equalTo: centerYAnchor)
  13. ])
  14. }
  15. func unblur() {
  16. subviews.forEach { subview in
  17. if subview.tag == 100 {
  18. subview.removeFromSuperview()
  19. }
  20. }
  21. }
  22. private func getBlurryImage(_ blurRadius: Double = 2.5) -> UIImage? {
  23. UIGraphicsBeginImageContext(bounds.size)
  24. layer.render(in: UIGraphicsGetCurrentContext()!)
  25. guard let image = UIGraphicsGetImageFromCurrentImageContext(),
  26. let blurFilter = CIFilter(name: "CIGaussianBlur") else {
  27. UIGraphicsEndImageContext()
  28. return nil
  29. }
  30. UIGraphicsEndImageContext()
  31. blurFilter.setDefaults()
  32. blurFilter.setValue(CIImage(image: image), forKey: kCIInputImageKey)
  33. blurFilter.setValue(blurRadius, forKey: kCIInputRadiusKey)
  34. var convertedImage: UIImage?
  35. let context = CIContext(options: nil)
  36. if let blurOutputImage = blurFilter.outputImage,
  37. let cgImage = context.createCGImage(blurOutputImage, from: blurOutputImage.extent) {
  38. convertedImage = UIImage(cgImage: cgImage)
  39. }
  40. return convertedImage
  41. }
  42. }

PS:请确保根据您的要求改进此组件(例如,如果已经模糊,请避免模糊,或者如果文本已更改,您可以删除当前模糊并再次应用模糊)。
PSPS:还要考虑到对某些内容应用模糊会使其内容溢出,因此将clipsToBounds = false设置为BlurredLabel或找到其他方法来实现您的视觉效果,以避免模糊图像看起来与之前未模糊的标签文本不在同一位置。
要使用它,您只需创建一个BlurredLabel

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

在一些按钮点击,也许你可以实现模糊的blurredLabel.blur()和非模糊的blurredLabel.unblur()

这是blur()通过2.5的blurRadius获得的输出

展开查看全部
drnojrws

drnojrws2#

您可以尝试将其发送到标签的视图层次结构的后面。
findATeamLabel.sendSubviewToBack(blurView)

jchrr9hc

jchrr9hc3#

我只是在标签后面添加了一个视图(标签不在视图里面,只是在它前面),然后我在视图中添加了模糊效果...我仍然认为应该有一个更简单的方法。

kb5ga3dv

kb5ga3dv4#

Swift 5 -作为UIView扩展的模糊

  1. extension UIView {
  2. struct BlurableKey {
  3. static var blurable = "blurable"
  4. }
  5. func blur(radius: CGFloat) {
  6. guard superview != nil else { return }
  7. UIGraphicsBeginImageContextWithOptions(CGSize(width: frame.width, height: frame.height), false, 1)
  8. layer.render(in: UIGraphicsGetCurrentContext()!)
  9. let image = UIGraphicsGetImageFromCurrentImageContext()
  10. UIGraphicsEndImageContext()
  11. guard
  12. let blur = CIFilter(name: "CIGaussianBlur"),
  13. let image = image
  14. else {
  15. return
  16. }
  17. blur.setValue(CIImage(image: image), forKey: kCIInputImageKey)
  18. blur.setValue(radius, forKey: kCIInputRadiusKey)
  19. let ciContext = CIContext(options: nil)
  20. let boundingRect = CGRect(
  21. x:0,
  22. y: 0,
  23. width: frame.width,
  24. height: frame.height
  25. )
  26. guard
  27. let result = blur.value(forKey: kCIOutputImageKey) as? CIImage,
  28. let cgImage = ciContext.createCGImage(result, from: boundingRect)
  29. else {
  30. return
  31. }
  32. let blurOverlay = UIImageView()
  33. blurOverlay.frame = boundingRect
  34. blurOverlay.image = UIImage(cgImage: cgImage)
  35. blurOverlay.contentMode = .left
  36. addSubview(blurOverlay)
  37. objc_setAssociatedObject(
  38. self,
  39. &BlurableKey.blurable,
  40. blurOverlay,
  41. objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN
  42. )
  43. }
  44. func unBlur() {
  45. guard
  46. let blurOverlay = objc_getAssociatedObject(self, &BlurableKey.blurable) as? UIImageView
  47. else {
  48. return
  49. }
  50. blurOverlay.removeFromSuperview()
  51. objc_setAssociatedObject(
  52. self,
  53. &BlurableKey.blurable,
  54. nil,
  55. objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN
  56. )
  57. }
  58. var isBlurred: Bool {
  59. return objc_getAssociatedObject(self, &BlurableKey.blurable) is UIImageView
  60. }
  61. }
展开查看全部
oalqel3c

oalqel3c5#

没有一个答案对我有效,接受的答案不工作的背景颜色不同的白色,或标签颜色不同的黑色的基础上的意见,它转到另一个问题,但答案使模糊向右移动了很多。因此,经过一些阅读调整CGRect的结果图像。

  1. class BlurredLabel: UILabel {
  2. var isBlurring = false {
  3. didSet {
  4. setNeedsDisplay()
  5. }
  6. }
  7. var blurRadius: Double = 8 {
  8. didSet {
  9. blurFilter?.setValue(blurRadius, forKey: kCIInputRadiusKey)
  10. }
  11. }
  12. lazy var blurFilter: CIFilter? = {
  13. let blurFilter = CIFilter(name: "CIGaussianBlur")
  14. blurFilter?.setDefaults()
  15. blurFilter?.setValue(blurRadius, forKey: kCIInputRadiusKey)
  16. return blurFilter
  17. }()
  18. override init(frame: CGRect) {
  19. super.init(frame: frame)
  20. layer.isOpaque = false
  21. layer.needsDisplayOnBoundsChange = true
  22. layer.contentsScale = UIScreen.main.scale
  23. layer.contentsGravity = .center
  24. isOpaque = false
  25. isUserInteractionEnabled = false
  26. contentMode = .redraw
  27. }
  28. required init?(coder: NSCoder) {
  29. super.init(coder: coder)
  30. }
  31. override func display(_ layer: CALayer) {
  32. let bounds = layer.bounds
  33. guard !bounds.isEmpty && bounds.size.width < CGFloat(UINT16_MAX) else {
  34. layer.contents = nil
  35. return
  36. }
  37. UIGraphicsBeginImageContextWithOptions(layer.bounds.size, layer.isOpaque, layer.contentsScale)
  38. if let ctx = UIGraphicsGetCurrentContext() {
  39. self.layer.draw(in: ctx)
  40. var image = UIGraphicsGetImageFromCurrentImageContext()?.cgImage
  41. if isBlurring {
  42. blurFilter?.setValue(CIImage(cgImage: image!), forKey: kCIInputImageKey)
  43. let ciContext = CIContext(cgContext: ctx, options: nil)
  44. if let blurOutputImage = blurFilter?.outputImage {
  45. let boundingRect = CGRect(
  46. x:0,
  47. y: blurOutputImage.extent.minY,
  48. width: blurOutputImage.extent.width,
  49. height: blurOutputImage.extent.height
  50. )
  51. image = ciContext.createCGImage(blurOutputImage, from: boundingRect)
  52. }
  53. }
  54. layer.contents = image
  55. }
  56. UIGraphicsEndImageContext()
  57. }
  58. }
展开查看全部

相关问题