掩蔽的UIView /的UIImageView到切口透明文本

Question

我怎么能掩盖的UIView或UIImageView的，这样一个文本缺口从它？

我GOOGLE了很多，似乎很多人挣扎一样。最恼人的是我总是尝试颠倒快照视图的alpha来获得结果。

我想是这样的：

Answer 1

我的主要问题是我的理解。我们可以用相反的方式将其分层，而不是采用彩色视图并试图在其中创建透明的孔。 所以我们在后面有彩色背景，后面是前面的图像，它上面只有文字部分。实际上，如果你使用UIView的maskView属性来使用iOS 8+，那就很简单了。

所以它可能看起来在迅速的是这样的：

let coloredBackground = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100)) 
    coloredBackground.backgroundColor = UIColor.greenColor() 

    let imageView = UIImageView(frame: coloredBackground.bounds) 
    imageView.image = UIImage(named: "myImage") 
    coloredBackground.addSubview(imageView) 

    let label = UILabel(frame: coloredBackground.bounds) 
    label.text = "stackoverflow" 
    coloredBackground.addSubview(label) 

    imageView.maskView = label 

Answer 2

这是定制模板标签。

import UIKit 
final class MaskLabel: UILabel { 

// MARK: - IBInspectoable 
@IBInspectable var cornerRadius: CGFloat { 
    get { return self.layer.cornerRadius } 
    set { self.layer.cornerRadius = newValue } 
} 

@IBInspectable var borderWidth: CGFloat { 
    get { return self.layer.cornerRadius } 
    set { self.layer.borderWidth = newValue } 
} 

@IBInspectable var borderColor: UIColor { 
    get { return UIColor(cgColor: self.layer.borderColor ?? UIColor.clear.cgColor) } 
    set { self.layer.borderColor = newValue.cgColor } 
} 

@IBInspectable var insetTop: CGFloat { 
    get { return self.textInsets.top } 
    set { self.textInsets.top = newValue } 
} 

@IBInspectable var insetLeft: CGFloat { 
    get { return self.textInsets.left } 
    set { self.textInsets.left = newValue } 
} 

@IBInspectable var insetBottom: CGFloat { 
    get { return self.textInsets.bottom } 
    set { self.textInsets.bottom = newValue } 
} 

@IBInspectable var insetRight: CGFloat { 
    get { return self.textInsets.right } 
    set { self.textInsets.right = newValue } 
} 



// MARK: - Value 
// MARK: Public 
private var textInsets = UIEdgeInsets.zero 
private var originalBackgroundColor: UIColor? = nil 



// MARK: - Initializer 
required init?(coder aDecoder: NSCoder) { 
    super.init(coder: aDecoder) 

    setLabelUI() 
} 

override init(frame: CGRect) { 
    super.init(frame: frame) 

    setLabelUI() 
} 

override func prepareForInterfaceBuilder() { 
    setLabelUI() 
} 


// MARK: - Draw 
override func drawText(in rect: CGRect) { 
    super.drawText(in: UIEdgeInsetsInsetRect(rect, textInsets)) 
    guard let context = UIGraphicsGetCurrentContext() else { return } 

    context.saveGState() 
    context.setBlendMode(.clear) 

    originalBackgroundColor?.setFill() 
    UIRectFill(rect) 

    super.drawText(in: rect) 
    context.restoreGState() 
} 


// MARK: - Function 
// MARK: Private 
private func setLabelUI() { 
    // cache (Before masking the label, the background color must be clear. So we have to cache it) 
    originalBackgroundColor = backgroundColor 
    backgroundColor = .clear 

    layer.cornerRadius = cornerRadius 
    layer.borderWidth = borderWidth 
    layer.borderColor = borderColor.cgColor 
} 
} 

这是结果。