HarmonyOS App全局水印？

Question

要求App使用过程所有页面均需带有水印。

其他系统实现逻辑的是在ActivityLifeCyclerCallback全局监听页面生命周期，统一添加水印视图。

HarmonyOS是否有类似的实现逻辑？或者推荐用什么方案进行实现

Answer 1

使用overlay属性绘制，示例参考：

@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)
      }
    })
}


Column() {
  Text("没有数据哦").fontColor("#495057")
  Image($r("app.media.empty")).width(300)
}
.layoutWeight(1)
.overlay(this.Watermark())
.width("100%")

目前没有统一处理全局水印的方式，可以把水印样式定义成公共组件，可参考如下代码：

1、定义全局的水印组件

@Entry
@Component
export struct WaterMarkComponent {
  build() {
    Column({ space: 10 }) {
      Text(“TestMark”)
      .fontSize(50)
        .fontColor(Color.Gray)
    }
    .width(‘100%’)
    .height(‘100%’)
    .backgroundColor("#51aaaaaa")
      .justifyContent(FlexAlign.Center)
  }
}

@Builder
export function createWaterMark() {
  WaterMarkComponent()
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件
}

2、基于水印组件定义一个export的custombuilder，以供全局使用

@Builder
export function createWaterMark() {
  WaterMarkComponent()
    .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件
}

3.在需要加水印页面的根节点上添加.overlay属性，并使用上述的custombuilder

import { promptAction } from ‘@kit.ArkUI’
import { createWaterMark } from ‘…/components/watermark’;

@Entry
@Component
struct TestMarkDemo {
  build() {
    Row() {
      Column() {
        Text(“click”)
        .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => { // 测试对正常事件的响应
            promptAction.showToast({ message: “test” })
          })
      }
      .width(‘100%’)
    }
    .height(‘100%’)
    .overlay(createWaterMark())
  }
}