鸿蒙平台实现高斯模糊的渐变色

0 阅读1分钟

原图:

landscape.png

加上之后的效果: Screenshot_20260313150342795.png

代码:

@Builder
C2() {
  Stack({ alignContent: Alignment.Bottom }) {
    Image($r('app.media.landscape'))
      .width('100%')
      .height('100%')
      .objectFit(ImageFit.Cover)
      .borderWidth(2)
      .borderColor('#ff0000')
    Column() {
    }
    .width('100%')
    .height('100%')
    .borderWidth(2)
    .borderColor('#0000ff')
    .linearGradient({
      direction: GradientDirection.Bottom,
      colors: [
        ['#FFFFFFFF', 0.0],
        ['#FFFFFFFF', 0.6],
        ['#00FFFFFF', 1.0]
      ]
    })
    .blendMode(BlendMode.DST_IN)
  }
  .width('100%')
  .height('25%')
  .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
}


End