HarmonyOS 全局水印通过Navigation实现？

Question

请结合overlay属性实现。

Answer 1

页面内容：

import { harJump, MainPage , VisionPage} from 'library'
import { outWatermark } from '../util/CompUtil'
import { DialogPage, N2Page } from './N2Page'
import { hilog } from '@kit.PerformanceAnalysisKit'

const TAG: string = 'testTag'

@Entry
@Component
struct N1Page {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  @Builder
  PageMap(name: string) {
    if (name === "N2Page") {
      N2Page()
    } else if (name === "DialogPage") {
      DialogPage()
    } else if (name == 'MainPage') {
      MainPage()
    }else if (name == 'VisionPage') {
      VisionPage()
    }
  }
  build() {
    // Column() {
    Navigation(this.pageInfos) {
      Column() {
        Button('跳转har包中VersionPage')
          .margin({ bottom: '6%' })
          .onClick(() => {
            hilog.info(0x00000, TAG, '{跳转har包中VersionPage }内容为{public}%s', '');
            this.pageInfos.pushPathByName("VisionPage", null) // 弹出路由栈栈顶元素
          })
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'N2Page' }) //将name指定的NavDestination页面信息入栈
          })

        Button('跳转har包中页面MainPage')
          .margin({ bottom: '6%' })
          .onClick(() => {
            hilog.info(0x00000, TAG, '{跳转har包中页面MainPage }内容为%{public}s', '');
            this.pageInfos.pushPath({ name: 'MainPage' }) //将name指定的NavDestination页面信息入栈
          })

        Button('命名路由')
          .margin({ bottom: '6%' })
          .onClick(() => {
            hilog.info(0x00000, TAG, '{命名路由 }内容为{public}%s', '');
            harJump()
          })
      }
    }
    .title("首页")
    .navDestination(this.PageMap)
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
    .overlay(outWatermark('水印水印888'))
  }
}
const settings: RenderingContextSettings = new RenderingContextSettings(true)
const context: CanvasRenderingContext2D = new CanvasRenderingContext2D(settings)

// msg：水印内容
@Builder
export function outWatermark(msg:string) {
  Canvas(context)
    .width("100%")
    .height("100%")
    .hitTestBehavior(HitTestMode.Transparent)
    .onReady(() => {
      context.fillStyle = '#10000000'
      context.font = "16vp"
      context.textAlign = "center"
      context.textBaseline = "middle"
      // 在这里绘制文字水印，也可以是图片水印
      for (let i = 0; i < context.width / 120; i++) {
        context.translate(120, 0)
        let j = 0
        for (; j < context.height / 120; j++) {
          context.rotate(-Math.PI / 180 * 30)
          context.fillText(msg, -60, -60)
          context.rotate(Math.PI / 180 * 30)
          context.translate(0, 120)
        }
        context.translate(0, -120 * j)
      }
    })
}