1、需求背景

很多企业内部应用，都会有这样的需求：

• 页面显示员工姓名、工号
• 防止截图泄露
• 全局统一水印
• 动态切换水印内容
• 不影响页面交互

效果如下：

---

2、核心思路

本方案采用 纯 ArkUI 水印覆盖方案，核心实现思路：

• “砖墙式” 平铺效果
• angle属性倾斜
• HitTest 穿透，不阻塞页面点击
• emitter全局动态刷新

---

3、方案特点

• 全屏水印层，确保水印永远位于页面最上层，所有页面都会被覆
• 支持动态更新
• 支持自定义样式
• 不影响页面点击
• 使用简单，一次接入，全 App 生效
• 已封装为 npm 组件，真正做到开箱即用
• 性能稳定

---

4、项目地址

GitHub：HarmonyWatermark

ohpm：@ericbyliang/lib_watermark

---

5、使用方法

5.1 安装组件

安装 ohpm 包：

ohpm install @ericbyliang/lib_watermark

5.2 页面使用

全局安全水印组件加入顶级根界面即可，永远处于页面最上层：

import { setWatermarkText, WatermarkComponent } from '@ericbyliang/lib_watermark';

build() {
   Root() {
        ....
        WatermarkComponent()
   }
}

5.3 全局设置水印文本

import { setWatermarkText, WatermarkComponent } from '@ericbyliang/lib_watermark';
// 设置水印，比如登录后，设置一次即可
setWatermarkText("林俊杰 2000022");
// 取消水印，比如在登录页面
setWatermarkText("");

这意味着：

• 登录后可以设置员工信息
• 退出登录后可以清除
• 用户切换账号可动态刷新

5.4 动态设置水印文本&自定义水印样式

组件支持动态传参：

WatermarkComponent({
      waterText:'周杰伦 1000001',
      textSize: 14,
      textColor: 'rgba(80,80,80, 0.01)',
      angle: -20,
      grapX: 120,
      grapY: 180
})

支持参数：

参数	说明
waterText	水印文本
textSize	字体大小（rpx）
textColor	水印颜色/透明度
angle	旋转角度
gapX	水平间距
gapY	垂直间距

---

6、核心代码讲解

1、组件首先通过 emitter 监听全局水印事件，实现：

• 登录后动态设置员工信息
• 切换账号实时刷新
• 退出登录清除水印

2、构建一个且唯一的全屏透明覆盖层，保证水印永远处于页面最上层

import { emitter } from "@kit.BasicServicesKit";
import { EventType } from "./EventType";

@Component
export struct WatermarkComponent {
  @Prop waterText?: string
  @Prop textSize: number = 14
  @Prop textColor: string = 'rgba(80,80,80,0.08)'
  @Prop angle: number = -20
  @Prop gapX: number = 120
  @Prop gapY: number = 180


  aboutToAppear(): void {
    emitter.on(EventType.WaterMarkEvent, (eventData: emitter.EventData) => {
      const waterText = eventData?.data?.waterText as string //全局安全水印
      this.waterText = waterText
    });
  }

  aboutToDisappear(): void {
    emitter.off(EventType.WaterMarkEvent)
  }

  build() {
    // 全屏水印层
    Stack() {
      // 在这里放重复水印
      if (this.waterText) {
        this.renderWatermark();
      }
    }
    .width('100%')
    .height('100%')
    .align(Alignment.Center)
    .backgroundColor(Color.Transparent)
    .hitTestBehavior(HitTestMode.Transparent) // 穿透点击
    .zIndex(9999);
  }

  // 绘制多个水印
  @Builder
  private renderWatermark() {
    Column() {
      ForEach(Array.from({ length: 100 }), (_: number, index: number) => {
        Row() {
          ForEach(Array.from({ length: 30 }), () => {
            Text(this.waterText)
              .fontSize(this.textSize)
              .fontColor(this.textColor) // 透明度
              .padding({ right: this.gapX, bottom: this.gapY})
          }
          )
        }.rotate({
          angle: this.angle,
        }).margin({left:index % 2 == 0?0:(this.textSize * (this.waterText||'').length) / 2})
      })
    }.margin({top:-100})
  }
}