【鸿蒙ArkUI实战开发】基于原生的水印添加能力

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
• 【鸿蒙UI实战开发】基于原生能力的键盘控制
• 【鸿蒙UI实战开发】基于子窗口实现应用内悬浮窗
• 【鸿蒙ArkUI实战开发】基于bindSheet的半模态弹窗
• 【鸿蒙ArkUI实战开发】基于tabs实现页面布局
• 【鸿蒙ArkUI实战开发】基于webView的嵌套滚动
• 【鸿蒙ArkUI实战开发】基于原生的水印添加能力
• 持续更新中……

场景描述

添加水印是一个比较常见的功能，下面列举一些遇到的业务需求：

• 场景一：在页面背景上添加全局水印

• 场景二：保存图片添加水印

• 场景三：拍照添加水印

• 场景四：window级别的全局水印

方案描述

场景一：

在页面背景上添加全局水印

效果图：

方案

页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印，在使用Stack组件叠加在page跟容器上

方式一：使用canvas进行绘制

Stack({ alignContent: Alignment.Center }) {

Column() {

Text("没有数据哦").fontColor("#495057")

Image($r("app.media.empty")).width(300)

}

Canvas(this.context)

.width("100%")

.height("100%")

.hitTestBehavior(HitTestMode.Transparent)

.onReady(() => {

this.context