HarmonyOS 鸿蒙Next水印功能如何实现

HarmonyOS 鸿蒙Next水印功能如何实现

水印的功能（设置水印、移除水印、检测页面是否有水印功能），在鸿蒙版本上应该如何实现，是否有对应的示例可以参考，谢谢！

4 回复

可通过浮层的方式给视图设置水印。 具体实现可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5 可以把水印样式定义成公共组件，可参考如下代码：

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

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

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

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

import { createWaterMark } from '../components/watermark';

@Entry
@Component
struct Index {

  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller){
      Column() {
        ForEach(this.arr, (item: number) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
            .onClick(()=>{
            })
        }, (item: string) => item)
      }.width('100%')
    }
    .overlay(createWaterMark())
  }
}

更多关于HarmonyOS 鸿蒙Next水印功能如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


转载其他人的回答，已测试可以使用

[@Entry](/user/Entry)
[@Component](/user/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](/user/Builder)

export function createWaterMark() {

 WaterMarkComponent()

   .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件

}

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

[@Builder](/user/Builder)

export function createWaterMark() {

 WaterMarkComponent()

   .hitTestBehavior(HitTestMode.None) // 必须设置其触摸测试为None或Transparent，否则正常组件无法响应事件

}

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

import { promptAction } from '[@kit](/user/kit).ArkUI'

import { createWaterMark } from '…/components/watermark';

[@Entry](/user/Entry)

[@Component](/user/Component)

struct TestMarkDemo {

 build() {

   Row() {

     Column() {

       Text('click')

       .fontSize(50)

         .fontWeight(FontWeight.Bold)

         .onClick(() => { // 测试对正常事件的响应

           promptAction.showToast({ message: 'test' })

         })

     }

     .width('100%')

   }

   .height('100%')

   .overlay(createWaterMark())

 }

}
看你是在什么地方添加水印了，如果是图片，那可以用堆叠布局和canvas来实现

HarmonyOS 鸿蒙Next水印功能的实现，可以通过以下两种主要方式：

一、使用Canvas组件

  1. 在Canvas的onReady函数中，通过绘制文本或图片作为水印。
  2. 利用Stack布局将Canvas组件置于页面顶层，以实现水印效果。

二、封装水印组件

  1. 创建一个自定义的水印组件，内部使用Canvas进行水印绘制。
  2. 通过overlay属性在其他页面组件上添加该水印组件，以实现水印的复用和灵活布局。

具体实现时，可以根据业务需求调整水印的文本、字体大小、颜色等属性。同时，为了确保水印不会影响用户的正常操作，需要设置水印层的触摸测试行为为透明，以穿透触摸事件至根容器。

以上两种方法均可以有效地在HarmonyOS 鸿蒙Next中实现水印功能。如果在实际操作中遇到问题，建议查阅官方文档或相关资料以获取更详细的解决方案。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部