HarmonyOS NEXT有没有对UI添加水印的方法?

Question

HarmonyOS NEXT有没有对UI添加水印的方法?

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

具体参考如下demo：

@Entry 
@Component 
struct PageWatermark { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
 
  @Builder Watermark() { 
    Canvas(this.context) 
      .width("100%") .height("100%") 
      .hitTestBehavior(HitTestMode.Transparent) 
      .onReady(() => { 
        this.context.fillStyle = '#10000000' 
        this.context.font = "16vp" 
        this.context.textAlign = "center" 
        this.context.textBaseline = "middle" 
        // 在这里绘制文字水印，也可以是图片水印 
        for (let i = 0; i < this.context.width / 120; i++) { 
          this.context.translate(120, 0) 
          let j = 0 
          for (; j < this.context.height / 120; j++) { 
            this.context.rotate(-Math.PI / 180 * 30) 
            // 此处水印数据是写成定值的，具体请替换为自己的水印 
            this.context.fillText("水印水印水印", -60, -60) 
            this.context.rotate(Math.PI / 180 * 30) 
            this.context.translate(0, 120) } 
          this.context.translate(0, -120 * j) 
        } 
      }) 
  } 
 
  build() { 
    Column() { 
      Text("没有数据哦").fontColor("#495057") 
      Image($r("app.media.startIcon")) 
        .width(300) 
        .layoutWeight(1) 
        .overlay(this.Watermark()) 
        .width("100%") 
    } 
    .height('100%') 
    .width('100%') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。