HarmonyOS APP内有水印功能,如何实现?

APP端有水印的功能(设置水印、移除水印、检测页面是否有水印功能),在HarmonyOS 版本上应该如何实现,是否有对应的示例可以参考,谢谢!

HarmonyOS
2024-10-22 09:37:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可通过浮层的方式给视图设置水印。 具体实现可参考:

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())  
  }  
}
分享
微博
QQ
微信
回复
2024-10-22 16:47:08
相关问题
HarmonyOS 如何app 添加水印
386浏览 • 1回复 待解决
HarmonyOS 绘制水印如何实现
247浏览 • 1回复 待解决
canvas如何实现水印效果
975浏览 • 1回复 待解决
HarmonyOS 如何app内全页面添加水印
38浏览 • 1回复 待解决
如何实现 app 内置全局悬浮球功能
1986浏览 • 1回复 待解决
HarmonyOS 水印相机、水印视频
25浏览 • 1回复 待解决
HarmonyOS 如何使用全局水印
0浏览 • 1回复 待解决
HarmonyOS 分享功能如何实现
224浏览 • 1回复 待解决
HarmonyOS 背景水印问题
374浏览 • 1回复 待解决
HarmonyOS 如何实现DeepLink功能
34浏览 • 1回复 待解决
HarmonyOS 如何实现直播功能
44浏览 • 1回复 待解决
HarmonyOS 曝光功能如何实现
29浏览 • 1回复 待解决
如何使用canvas添加水印
1346浏览 • 1回复 待解决
HarmonyOS 如何实现图片编辑功能
70浏览 • 1回复 待解决
HarmonyOS 如何实现搜索历史功能
73浏览 • 1回复 待解决
HarmonyOS如何实现头像选择功能
648浏览 • 1回复 待解决
HarmonyOS 如何实现长按点击功能
28浏览 • 1回复 待解决