Text组件,可以通过 .linearGradient 设置背景色的渐变,如何设置文字内容的渐变效果?

Text组件,可以通过 .linearGradient 设置背景色的渐变,如何设置文字内容的渐变效果?

HarmonyOS
2024-05-06 22:42:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
e_leaner

使用linearGradient与blendMode结合可以实现该效果,相关文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-gradient-color-0000001815767728#ZH-CN_TOPIC_0000001815767728__lineargradient​​https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345#ZH-CN_TOPIC_0000001862607345__blendmode11

请参考如下demo:

@Entry 
@Component 
struct Page240126155113078 { 
@State message: string = ‘Hello World’; 
 
build() { 
Row() { 
Column() { 
Row() { 
Text(this.message) 
.fontSize(50) 
.fontWeight(FontWeight.Bold) 
.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
}.linearGradient({ 
direction: GradientDirection.Right, 
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 
}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 
} 
.width(‘100%’) 
} 
.height(‘100%’) 
} 
}
分享
微博
QQ
微信
回复
2024-05-07 15:32:55
相关问题
Button组件如何设置渐变背景色
956浏览 • 1回复 待解决
如何设置窗口背景色
550浏览 • 1回复 待解决
List组件如何设置两端渐变效果
652浏览 • 1回复 待解决
文字背景颜色渐变显示
747浏览 • 1回复 待解决
使用js引擎 设置dom背景色无效
343浏览 • 0回复 待解决
TextInput按压态背景色如何修改
785浏览 • 1回复 待解决
JSUI按钮 toolbar按下背景色怎么去掉
3923浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
557浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
839浏览 • 1回复 待解决
如何设置组件透明效果
539浏览 • 1回复 待解决
组件如何实现渐变色?
795浏览 • 1回复 待解决
组件如何设置模糊效果
575浏览 • 1回复 待解决