UILabel 文本上的渐变描边

Question

PS: 我已经通过在 targetView

图层上添加蒙版解决了这个问题

我有一个场景，我必须用渐变颜色描边 UIlabel 文本我发现每个 link 与描边颜色相关，但它们只应用简单的颜色，这并不复杂，但我想实现是 UIlabel 文本上的渐变颜色描边。到目前为止我已经试过了。

 func createGradientLabel(_ targetView : UIView, letter : String,fontsize : Int ,position : Int,_ startColor: UIColor = UIColor.init(named: "startColor")!, _ endColor: UIColor = UIColor.init(named: "endColor")!) {
    gradientLayer = CAGradientLayer()
    gradientLayer.frame = targetView.bounds
    gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    targetView.layer.addSublayer(gradientLayer)
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    
    // Create a label and add it as a subview
    let label = UILabel(frame: targetView.bounds)
    let strokeTextAttributes = [
        NSAttributedString.Key.strokeColor : UIColor.red,
      NSAttributedString.Key.foregroundColor : UIColor.clear,
      NSAttributedString.Key.strokeWidth : -4.0,
      NSAttributedString.Key.font : UIFont.setCustomFont(type: .Poppin_Reg, size: 30)]
      as [NSAttributedString.Key : Any]

    label.attributedText = NSMutableAttributedString(string: letter, attributes: strokeTextAttributes)
    //label.text = letter
    //label.font = UIFont.boldSystemFont(ofSize: CGFloat(fontsize))
    
    targetView.addSubview(label)
    label.layer.shadowColor = #colorLiteral(red: 1, green: 0.3294117647, blue: 0.2862745098, alpha: 1)
    label.layer.shadowOffset = .init(width: 0, height: 7)
    label.layer.shadowOpacity = 0.6

    // doing this will stroke label with gradient
    targetView.layer.mask = label.layer
}

我附上了我已经实现的和我想要实现的截图。

到目前为止我已经做到了。

这是我想要实现的。

Answer 1

不能用渐变描边。最接近的方法是将渐变绘制为背景，并使用文本绘制对其进行 mask。所以你的问题归结为将文本绘制为蒙版，包括字体和阴影。

Answer 2

这是我解决这个问题的方法。

  func createGradientLabel(_ targetView : UIView, letter : String,fontsize : Int ,position : Int,_ startColor: UIColor = UIColor.init(named: "startColor")!, _ endColor: UIColor = UIColor.init(named: "endColor")!) {
    gradientLayer = CAGradientLayer()
    gradientLayer.frame = targetView.bounds
    gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    targetView.layer.addSublayer(gradientLayer)
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    
    // Create a label and add it as a subview
    let label = UILabel(frame: targetView.bounds)
    let strokeTextAttributes = [
        NSAttributedString.Key.strokeColor : UIColor.red,
      NSAttributedString.Key.foregroundColor : UIColor.clear,
      NSAttributedString.Key.strokeWidth : 8.0,
      NSAttributedString.Key.font : UIFont.setCustomFont(type: .Poppin_Bold, size: 30)]
      as [NSAttributedString.Key : Any]

    label.attributedText = NSMutableAttributedString(string: letter, attributes: strokeTextAttributes)

    targetView.addSubview(label)
    label.layer.shadowColor = #colorLiteral(red: 1, green: 0.3294117647, blue: 0.2862745098, alpha: 1)
    label.layer.shadowOffset = .init(width: 0, height: 7)
    label.layer.shadowOpacity = 0.8

    //This Line is the key
    targetView.layer.mask = label.layer
}

结果：

UILabel 文本上的渐变描边

Gradient Stroke On UILabel Text

iphone

ios

swift

ios13