HarmonyOS 鸿蒙Next如何使用全局水印

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何使用全局水印

如何使用全局水印，是否有相关文档或者demo。

Harmonyos Next教程
2 回复

使用canvas进行绘制、或者使用overlay属性绘制可参考DEMO:

1.canvas进行绘制

[@Entry](/user/Entry)
[@Component](/user/Component)
struct globalWaterPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

build() {
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.fillStyle = '#10000000'
this.context.font = "16vp"
this.context.textAlign = "center"
this.context.textBaseline = "middle"

//在这里绘制文字水印，也可以是图片水印
for (let i = 0; i < this.context.width / 120; i++) {
this.context.translate(120, 0)
let j = 0
for (; j < this.context.height / 120; j++) {
this.context.rotate(-Math.PI / 180 * 30)
// 此处文字水印数据
this.context.fillText("水印水印水印", -60, -60)
this.context.rotate(Math.PI / 180 * 30)
this.context.translate(0, 120)

}
this.context.translate(0, -120 * j)
}
})
}.layoutWeight(1)
}
}

2.使用overlay属性绘制


[@Entry](/user/Entry)
[@Component](/user/Component)
struct globalWaterPageB {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

[@Builder](/user/Builder)
Watermark() {
Canvas(this.context)
.width("100%")
.height("100%")
.hitTestBehavior(HitTestMode.Transparent)
.onReady(() => {
this.context.fillStyle = '#10000000'
this.context.font = "16vp"
this.context.textAlign = "center"
this.context.textBaseline = "middle"
// 在这里绘制文字水印，也可以是图片水印
for (let i = 0; i < this.context.width / 120; i++) {
this.context.translate(120, 0)
let j = 0
for (; j < this.context.height / 120; j++) {
this.context.rotate(-Math.PI / 180 * 30)
// 此处水印数据是写死的，具体请替换为自己的水印
this.context.fillText("水印水印水印", -60, -60)
this.context.rotate(Math.PI / 180 * 30)
this.context.translate(0, 120)
}
this.context.translate(0, -120 * j)
}
})
}

build() {
Column() {
Text("没有数据哦").fontColor("#495057")
Image($r("app.media.empty")).width(300)
}
.layoutWeight(1)
.overlay(this.Watermark())
.width("100%")
.height('100%')
}
}

HarmonyOS 鸿蒙Next使用全局水印的方法如下：

一、核心逻辑

全局水印的实现主要依赖于Canvas组件的绘制能力，以及利用Stack或overlay属性将水印组件置于页面顶层。

二、具体步骤

  1. 使用Canvas绘制水印：

    • 在Canvas的onReady函数中，设置绘制水印的文本、字体大小、颜色等属性。
    • 通过循环和变换坐标，在页面上均匀分布水印。

  2. 将水印组件置于页面顶层：

    • 使用Stack布局，将Canvas组件作为子组件，并设置其alignContent属性为Alignment.Center，使其居中显示。
    • 或者，创建一个自定义的水印组件，内部使用Canvas进行水印绘制，然后通过overlay属性在其他页面组件上添加该水印组件。

三、注意事项

  • 需要给上层组件设置hitTestBehavior(HitTestMode.Transparent)属性，以确保触摸事件能够穿透水印层到达根容器。
  • 水印的样式和内容可以根据实际需求进行调整。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部