【HarmonyOS NEXT】实现页面水印功能

kotlin 代码解读复制代码@Entry
@Component
struct Index {
  @State message: string = '你好鸿蒙 Hello Harmony，这是一段普通文本测试水印效果';
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  // 水印容器宽高
  private water1wh: number = 140

  /**
   * 水印构造器
   * @param waterText 水印文本
   * @param fontSize 字号
   * @param fontColor 颜色
   */
  @Builder
  Watermark2(waterText: string, fontSize: string, fontColor: string) {
    Canvas(this.context)
      .width("100%")
      .height("100%")// 设置触摸测试控制，不影响跟节点触摸
      .hitTestBehavior(HitTestMode.Transparent)
      .onReady(() => {
        this.context.fillStyle = fontColor;
        this.context.font = fontSize;
        this.context.textAlign = "center"; // 单个容器中垂直居中
        // 计算屏幕中可摆放多少个水印个体，遍历渲染
        for (let i = 0; i < this.context.width / this.water1wh; i++) {
          this.context.translate(this.water1wh, 0);
          let j = 0;
          for (; j < this.context.height / this.water1wh; j++) {
            this.context.rotate(-Math.PI / 180 * 30);
            // 设置文本偏移
            this.context.fillText(waterText, -(this.water1wh / 2), -(this.water1wh / 2));
            this.context.rotate(Math.PI / 180 * 30);
            this.context.translate(0, this.water1wh);
          }
          this.context.translate(0, -this.water1wh * j);
        }
      })
  }

  build() {
    // overlay 浮层用法
    RelativeContainer() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .id("Text1")
        .onClick(() => {
          console.log("luvi > 触摸测试")
        })
        .alignRules({
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })
        .id("base")
    }
    // 在当前组件上，增加叠加自定义组件以作为该组件的浮层
    .overlay(this.Watermark2("20241012 张三", "15vp", "#2a000000"))
    .height('100%')
    .width('100%')

    // 层叠布局用法
    // Stack() {
    //   RelativeContainer() {
    //     Text(this.message)
    //       .fontSize(50)
    //       .fontWeight(FontWeight.Bold)
    //       .id("Text1")
    //       .onClick(() => {
    //         console.log("luvi > 触摸测试")
    //       })
    //       .alignRules({
    //         middle: { anchor: "__container__", align: HorizontalAlign.Center },
    //         center: { anchor: "__container__", align: VerticalAlign.Center }
    //       })
    //       .id("base")
    //   }
    //   .height('100%')
    //   .width('100%')
    //
    //   this.Watermark2("20241012 张三", "15vp", "#2a000000")
    // }
  }
}