文章
问答
冒泡
鸿蒙Next-渐变文本实现

在鸿蒙Next中,想要实现渐变文本可使用2种方式

  1. 使用Canvas绘制
  2. 使用linearGradient与blendMode结合

以下提供2种方法的实现样例代码

一、Canvas绘制

Canvas(this.context)
.onReady(() => {
let str = '这是一段渐变颜色的文字'
let size = this.context.measureText(str)
let linearGradient = this.context.createLinearGradient(0, 0, size.width, size.height)
linearGradient.addColorStop(0.0, 'red')
linearGradient.addColorStop(1.0, 'blue')
this.context.fillStyle = linearGradient
this.context.font = '50px'
this.context.textAlign = 'start'
this.context.textBaseline = 'top'
this.context.fillText(str, 0, 0)
})

二、使用linearGradient与blendMode结合

Row() {
  Text('这也是一段渐变颜色的文字')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
}
.linearGradient({
  direction: GradientDirection.Right,
  colors: [[0xff0000, 0.0], [0x00ff00, 1.0]]
})
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

关于作者

dmd1990
获得点赞
文章被阅读