如何在 Swift 中的 draw(_ rect: CGRect) 中绘制具有不同混合模式的 UILabel

Question

所以我有一个UILabel被绘制在渐变图像（即UIImageView）之上的。它看起来有点像这样：

我正在尝试更改's函数中blendMode图形上下文的 ，以便它绘制标签但使用混合模式与背景混合。UILabeldraw(_ rect: CGRect)softLight

这是我想要的样子：

这是我在draw(_ rect: CGRect)函数中的代码：

override func draw(_ rect: CGRect) {
    // Drawing code
     if let context = UIGraphicsGetCurrentContext() {
        context.setBlendMode(.softLight)
        self.textColor.set()
        self.drawText(in: rect)
   }
 }

此代码仅呈现顶部图片而不是混合版本。这不是我尝试过的全部，我尝试了很多其他的东西，但我只是不明白CGContext's 和draw特别是功能。

SO 上的大多数答案要么是旧的 Objective-c 并且已被弃用/损坏，要么是快速且过于复杂（例如使用 Metal）。我只想在我拥有的上下文中绘制文本并将上下文的混合模式设置为柔光。必须有一个简单的方法！

任何有关如何解决此问题的帮助将不胜感激。谢谢！

Answer 1

你不能用这种方式混合视图；它们具有独立解决的单独层层次结构。移动对象上的渐变和文本CALayer并混合它们（或在同一视图内手动绘制它们）。例如：

class MyView: UIView {
    let gradientLayer: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.red.cgColor,
                                UIColor.blue.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        return gradientLayer
    }()

    let textLayer: CATextLayer = {
        let textLayer = CATextLayer()
        let astring = NSAttributedString(string: "Text Example",
                                         attributes: [.font: UIFont(name: "MarkerFelt-Wide", size: 60)!])
        textLayer.string = astring
        textLayer.alignmentMode = kCAAlignmentCenter
        textLayer.bounds = astring.boundingRect(with: CGSize(width: .max, height: .max),
                                                options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil)
        return textLayer
    }()

    override func draw(_ rect: CGRect) {
        if let context = UIGraphicsGetCurrentContext() {
            gradientLayer.bounds = bounds
            gradientLayer.render(in: context)

            context.saveGState()
            context.setBlendMode(.softLight)

            context.translateBy(x: center.x - textLayer.bounds.width / 2,
                                y: center.y - textLayer.bounds.height / 2)

            textLayer.position = center
            textLayer.render(in: context)
            context.restoreGState()
        }
    }
}