HarmonyOS 鸿蒙Next 页面水印怎么加，并且还不影响页面的点击事件

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

HarmonyOS 鸿蒙Next 页面水印怎么加，并且还不影响页面的点击事件 Harmony Next 页面水印怎么加，并且还不影响页面的点击事件

Harmonyos Next教程
3 回复

可以使用一楼的自定义水印组件，在需要使用时使用overlay属性来使用

也可以使用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.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)

更多关于HarmonyOS 鸿蒙Next 页面水印怎么加，并且还不影响页面的点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以通过设置组件的浮层。

overlay(value: string | CustomBuilder | ComponentContent, options?: OverlayOptions )

在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。

### 参数名 类型 必填 说明
value string | CustomBuilder10+| ComponentContent12+ 是 遮罩文本内容或自定义组件构造函数。
说明： 自定义组件作为浮层时，不支持键盘走焦到自定义组件中。
options OverlayOptions 否 浮层的定位。
说明： 需要解析为Json格式。

API version 12之前，options:

{
  align?: [Alignment](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-appendix-enums-V5#alignment),
  offset?: {x?: number, y?: number}
}

官方示例：

//文本水印
@Entry
@Component
struct OverlayExample {
  build() {
    Column() {
      Column() {
        Text('floating layer')
          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
        Column() {
          Image($r('app.media.img'))
            .width(240).height(240)
            .overlay("Winter is a beautiful season, especially when it snows.", {
              align: Alignment.Bottom,
              offset: { x: 0, y: -15 }
            })
          }.border({ color: Color.Black, width: 2 })
        }.width('100%')
      }.padding({ top: 20 })
    }
  }
}

//自定义组件水印
@Entry
@Component
struct OverlayExample {
  @Builder OverlayNode() {
    Column() {
      Image($r('app.media.img1'))
      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
    }.width(180).height(180).alignItems(HorizontalAlign.Center)
  }

  build() {
    Column() {
      Image($r('app.media.img2'))
        .overlay(this.OverlayNode(), { align: Alignment.Center })
        .objectFit(ImageFit.Contain)
    }.width('100%')
    .border({ color: Color.Black, width: 2 }).padding(20)
  }
}

在HarmonyOS（鸿蒙）系统中为页面添加水印且不影响页面点击事件，可以通过自定义绘制水印以及确保水印层与可交互层分离来实现。

自定义水印绘制：

  • 创建一个自定义的组件或布局，用于绘制水印。
  • 在该组件或布局的onDraw方法中，使用Canvas绘制水印图案或文字。
  • 设置水印的透明度，以确保它不会完全遮挡页面内容，同时也不会影响用户交互。

水印层与可交互层分离：

  • 将水印层放置在页面的最上层，但确保它是一个非交互层，即不拦截任何点击事件。
  • 可以通过设置水印层的触摸事件监听器，并在监听器中返回false，来确保点击事件能够穿透水印层，传递给下层的可交互元素。

实现示例：

  • 使用FrameLayout或StackLayout来叠加水印层和页面内容层。
  • 将水印层设置为不可聚焦且不可点击，以确保其不影响页面其他元素的交互。

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

回到顶部