渐变作为 SwiftUI 中文本的前景色 [英] Gradient as foreground color of Text in SwiftUI
本文介绍了渐变作为 SwiftUI 中文本的前景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法在 SwiftUI 中使用渐变作为文本的前景色?
Is there any way of using a gradient as foregroundColor of Text in SwiftUI?
感谢提前回答!
推荐答案
我已经用新答案更新了我的答案,你可以试试这个.旧的一个答案仍然可用.
I have updated my answer with new answer, you can try with that. Old one Answer is still available.
新答案
import SwiftUI
struct GradientText: View {
var body: some View {
Text("Gradient foreground")
.gradientForeground(colors: [.red, .blue])
.padding(.horizontal, 20)
.padding(.vertical)
.background(Color.green)
.cornerRadius(10)
.font(.title)
}
}
extension View {
public func gradientForeground(colors: [Color]) -> some View {
self.overlay(LinearGradient(gradient: .init(colors: colors),
startPoint: .topLeading,
endPoint: .bottomTrailing))
.mask(self)
}
}
输出
旧答案
在 SwiftUI
你也可以这样做,如下使用 为文本添加渐变颜色
In SwiftUI
You can also do it, as below using concept of Add gradient color to text
渐变视图:
struct GradientView: View {
var body: some View {
VStack {
GradientLabelWrapper(width: 150) // you can give as you want
.frame(width: 200, height: 200, alignment: .center) // set frame as you want
}
}
}
GradientLabelWrapper :
struct GradientLabelWrapper: UIViewRepresentable {
var width: CGFloat
var text: String?
typealias UIViewType = UIView
func makeUIView(context: UIViewRepresentableContext<GradientLabelWrapper>) -> UIView {
let label = UILabel()
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
label.preferredMaxLayoutWidth = width
label.text = text ?? ""
label.font = UIFont.systemFont(ofSize: 25) //set as you need
label.applyGradientWith(startColor: .red, endColor: .blue)
return label
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<GradientLabelWrapper>) {
}
}
UILabel : 扩展
extension UILabel {
func applyGradientWith(startColor: UIColor, endColor: UIColor) {
var startColorRed:CGFloat = 0
var startColorGreen:CGFloat = 0
var startColorBlue:CGFloat = 0
var startAlpha:CGFloat = 0
if !startColor.getRed(&startColorRed, green: &startColorGreen, blue: &startColorBlue, alpha: &startAlpha) {
return
}
var endColorRed:CGFloat = 0
var endColorGreen:CGFloat = 0
var endColorBlue:CGFloat = 0
var endAlpha:CGFloat = 0
if !endColor.getRed(&endColorRed, green: &endColorGreen, blue: &endColorBlue, alpha: &endAlpha) {
return
}
let gradientText = self.text ?? ""
let textSize: CGSize = gradientText.size(withAttributes: [NSAttributedString.Key.font:self.font!])
let width:CGFloat = textSize.width
let height:CGFloat = textSize.height
UIGraphicsBeginImageContext(CGSize(width: width, height: height))
guard let context = UIGraphicsGetCurrentContext() else {
UIGraphicsEndImageContext()
return
}
UIGraphicsPushContext(context)
let glossGradient:CGGradient?
let rgbColorspace:CGColorSpace?
let num_locations:size_t = 2
let locations:[CGFloat] = [ 0.0, 1.0 ]
let components:[CGFloat] = [startColorRed, startColorGreen, startColorBlue, startAlpha, endColorRed, endColorGreen, endColorBlue, endAlpha]
rgbColorspace = CGColorSpaceCreateDeviceRGB()
glossGradient = CGGradient(colorSpace: rgbColorspace!, colorComponents: components, locations: locations, count: num_locations)
let topCenter = CGPoint.zero
let bottomCenter = CGPoint(x: 0, y: textSize.height)
context.drawLinearGradient(glossGradient!, start: topCenter, end: bottomCenter, options: CGGradientDrawingOptions.drawsBeforeStartLocation)
UIGraphicsPopContext()
guard let gradientImage = UIGraphicsGetImageFromCurrentImageContext() else {
UIGraphicsEndImageContext()
return
}
UIGraphicsEndImageContext()
self.textColor = UIColor(patternImage: gradientImage)
}
}
这篇关于渐变作为 SwiftUI 中文本的前景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文