Question

如何屏蔽UIView或UIImageView以便从中剪切文本？

我google了很多，似乎很多人都在苦苦挣扎。最烦人的我总是试图反转快照视图的alpha来获得结果。

我想要的是这样的：

Answer 1

这是自定义蒙版标签。

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
}
}

这是结果。

Answer 2

我遇到的主要问题是我的理解。我们可以反过来将其分层，而不是采用彩色视图并尝试在其中创建透明孔。因此我们在背面有彩色背景，然后是前面的图像，其上有遮罩，只显示文字部分。实际上，如果您通过使用UIView的maskView属性来使用iOS 8+，这非常简单。

所以它在swift中看起来像这样：

    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

屏蔽UIView / UIImageView以剪切透明文本

2 个答案: