当前位置: 首页 > news >正文

【HarmonyOS NEXT】实现页面水印功能

关键词:鸿蒙、水印、Watermark、页面、触摸问题

注:本期文章同样适用 OpenHarmony 的开发

在app开发过程中时常会出现敏感信息页面,为保护信息安全和及时的数据追踪,通常会采用给页面加水印的形式,那么本期文章会介绍如何在鸿蒙应用中实现页面水印的功能。

本期文章代码比较简单,核心逻辑为 ①对触摸事件的穿透控制②组件 .overlay() 浮层的使用,可自行修改 Watermark() 构建函数代码调整至自己业务所适合的样式。

触摸测试控制可参考官方文档:文档中心

效果如下:

完整代码:

如下代码使用 Canvas 画布绘制水印,计算当前屏幕展示水印个体个数进行渲染。当然也可以自行使用网格或其他布局实现效果。overlay 浮层也可替换使用 Stack() 层叠布局,本质在上方覆盖一层文本浮层即可。

需要注意的是:浮层是在跟容器组件的上层,所以需要给上层组件设置 .hitTestBehavior(HitTestMode.Transparent) 属性,穿透触摸事件至根容器,避免触摸事件被水印层拦截。

@Entry
@Component
struct Index {@State message: string = '你好鸿蒙 Hello Harmony,这是一段普通文本测试水印效果';private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);// 水印容器宽高private water1wh: number = 140/*** 水印构造器* @param waterText 水印文本* @param fontSize 字号* @param fontColor 颜色*/@BuilderWatermark2(waterText: string, fontSize: string, fontColor: string) {Canvas(this.context).width("100%").height("100%")// 设置触摸测试控制,不影响跟节点触摸.hitTestBehavior(HitTestMode.Transparent).onReady(() => {this.context.fillStyle = fontColor;this.context.font = fontSize;this.context.textAlign = "center"; // 单个容器中垂直居中// 计算屏幕中可摆放多少个水印个体,遍历渲染for (let i = 0; i < this.context.width / this.water1wh; i++) {this.context.translate(this.water1wh, 0);let j = 0;for (; j < this.context.height / this.water1wh; j++) {this.context.rotate(-Math.PI / 180 * 30);// 设置文本偏移this.context.fillText(waterText, -(this.water1wh / 2), -(this.water1wh / 2));this.context.rotate(Math.PI / 180 * 30);this.context.translate(0, this.water1wh);}this.context.translate(0, -this.water1wh * j);}})}build() {// overlay 浮层用法RelativeContainer() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).id("Text1").onClick(() => {console.log("luvi > 触摸测试")}).alignRules({middle: { anchor: "__container__", align: HorizontalAlign.Center },center: { anchor: "__container__", align: VerticalAlign.Center }}).id("base")}// 在当前组件上,增加叠加自定义组件以作为该组件的浮层.overlay(this.Watermark2("20241012 张三", "15vp", "#2a000000")).height('100%').width('100%')// 层叠布局用法// Stack() {//   RelativeContainer() {//     Text(this.message)//       .fontSize(50)//       .fontWeight(FontWeight.Bold)//       .id("Text1")//       .onClick(() => {//         console.log("luvi > 触摸测试")//       })//       .alignRules({//         middle: { anchor: "__container__", align: HorizontalAlign.Center },//         center: { anchor: "__container__", align: VerticalAlign.Center }//       })//       .id("base")//   }//   .height('100%')//   .width('100%')////   this.Watermark2("20241012 张三", "15vp", "#2a000000")// }}
}

水了水了...

相关文章:

【HarmonyOS NEXT】实现页面水印功能

关键词&#xff1a;鸿蒙、水印、Watermark、页面、触摸问题 注&#xff1a;本期文章同样适用 OpenHarmony 的开发 在app开发过程中时常会出现敏感信息页面&#xff0c;为保护信息安全和及时的数据追踪&#xff0c;通常会采用给页面加水印的形式&#xff0c;那么本期文章会介绍…...

selenium自动化测试之Junit

1. 常用的注解 将junit的索引添加到pom文件&#xff1a; <!-- https://mvnrepository.com/artifact/org.junit.jupiter/junit-jupiter-api --><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId&…...

【氮化镓】基于氮化镓的互补逻辑集成电路[Nature Electronics]

【摘要】本文介绍了一种基于氮化镓(GaN)的互补金属氧化物半导体(CMOS)逻辑集成电路,该电路利用氧等离子体处理技术实现了增强型n沟道和p沟道GaN场效应晶体管的单片集成。研究者们展示了包括反相器、与非门、或非门和传输门在内的基本逻辑门,以及多级逻辑电路,如锁存器和…...

Linux之如何找回 root 密码?

1、启动系统&#xff0c;进入开界面&#xff0c;在界面中按“e"进入编辑界面 2、进入编辑界面&#xff0c;使用键盘上的上下键把光标往下移动&#xff0c;找到以”Linux16“开通内容所在的行数&#xff0c;在行的最后面输入&#xff1a;init/bin/sh 3、输入完成后&…...

后端参数校验方式

1. 使用Hibernate Validator进行注解校验 这是Java中最常用的参数校验方式&#xff0c;基于JSR 303/JSR 380规范的实现&#xff0c;通常结合Valid或Validated注解进行参数校验。 使用步骤&#xff1a; 添加依赖&#xff08;如果使用Spring Boot&#xff0c;通常已经内置了Hi…...

访问控制列表(课内实验)

实验2&#xff1a;访问控制列表 实验目的及要求&#xff1a; 通过实验&#xff0c;进一步的理解标准ACL与扩展ACL的工作原理及执行过程。理解通配符的概念&#xff0c;熟练掌握标准ACL与扩展ACL的配置指令&#xff0c;掌握将访问控制列表应用VTY线路上&#xff0c;并且能够判断…...

处理Java内存溢出问题(java.lang.OutOfMemoryError):增加JVM堆内存与调优

处理Java内存溢出问题&#xff08;java.lang.OutOfMemoryError&#xff09;&#xff1a;增加JVM堆内存与调优 在进行压力测试时&#xff0c;遇到java.lang.OutOfMemoryError: Java heap space错误或者nginx报错no live upstreams while connecting to upstream通常意味着应用的…...

数据分析库Pandas

一、认识Pandas数据分析库 Pandas是一个功能强大的数据分析库&#xff0c;它提供了丰富的数据结构和函数来处理和分析表格数据。在处理类似您提供的Excel文件时&#xff0c;首先需要导入Pandas库并读取数据&#xff0c;然后进行数据清洗和预处理&#xff0c;最后进行数据分析和…...

nginx做负载均衡的策略有哪些和模块

文章目录 策略模块 策略 轮询&#xff1a;轮询是Nginx默认的负载均衡策略&#xff0c;每个请求会按时间顺序分配到不同的后端服务器。这种方式适用于服务器配置相当且无状态的服务场景。加权轮询&#xff1a;在轮询的基础上&#xff0c;通过设置权重来调整不同服务器处理请求的…...

基于SSM社区医院预约转诊管理系统JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…...

Android适配器更改,ListView未收到通知解析

只需要在每次适配器发生变化时&#xff0c;调用函数adapter.notifyDataSetChanged(); 其中的adapter是适配器名。 需要说明的适配器对应的数组&#xff1a;List<String>也是适配器的一部分。 如&#xff1a;以下代码中的lists数组 List<T> lists new ArrayLis…...

ubuntu18.04系统中图形化界面

一、Ubuntu 18.04 中&#xff0c;使用 GDM 作为默认的图形用户界面&#xff08;GUI&#xff09;管理器。GDM 是 GNOME Display Manager 的缩写&#xff0c;它是用于 Ubuntu 的显示管理器&#xff0c;负责处理登录和会话管理。 通过命令行重启 Ubuntu 18.04 上的图形界面服务&am…...

深入Semantic Kernel:插件开发与实践应用(进阶篇)

文章目录 一、引言二、开发Semantic Kernel插件三、实战3.1 时间信息插件3.2 小部件工厂插件3.3 初始化Semantic Kernel实例3.4 四个实战示例3.4.1 模型幻觉3.4.2 给模型提供时间信息3.4.3 AI自动调用函数3.4.4 AI自动调用和使用枚举 四、结论 一、引言 在上一篇入门文章《探索…...

基于SpringBoot+Vue+Uniapp的植物园管理小程序系统(2024最新,源码+文档+远程部署+讲解视频等)

3. 论文参考 4. 项目运行截图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring …...

2024zzuacm新生选拔赛第一场

2024zzuacm新生选拔赛第一场https://ac.nowcoder.com/acm/contest/92409 python代码源自我有异议症QAQ A - 降智视频 题意 起初有n个数都在丁丁手中&#xff0c;进行如下操作k次&#xff1a; 豆豆从丁丁手中拿走标号为奇数的数。对丁丁的其他的数进行重新标号。 问进行k次…...

IP地址如何支持远程办公?

由于当今社会经济的飞速发展&#xff0c;各个方向的业务都不免接触到跨省、跨市以及跨国办公的需要&#xff0c;随之而来的远程操作的不方便&#xff0c;加载缓慢&#xff0c;传输文件时间过长等困难&#xff0c;如何在万里之外实现远程办公呢&#xff1f;我们以以下几点进行阐…...

spring 集合注入格式

数组 List Set Map properties 案例 package org.example.dao.impl;import org.example.dao.BookDao;import java.util.List; import java.util.Map; import java.util.Properties; import java.util.Set;public class BookDaoImpl implements BookDao {private int[] array;p…...

基于Zabbix进行服务器运行情况监测

文章目录 引言I Zabbix主要构成下载并安装Zabbix被监控主机安装zabbix agent创建被监控主机报警设置II 常见问题cannot use database "zabbix": its "users" table is empty (is this the Zabbix proxy database?)重置 Zabbix Web 界面密码Zabbix agent i…...

Github优质项目推荐 - 第五期

文章目录 Github优质项目推荐 - 第五期一、【localsend】&#xff0c;47.5k stars - 附近设备文件互传二、【Pake】&#xff0c;29.9k stars - 网页变成桌面应用三、【laravel-crm】&#xff0c;10.7k stars - CRM 解决方案四、【localstack】&#xff0c;55.7k stars - 本地 A…...

Java_ EE (网络编程)

网络编程基本概念: 计算机网络计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。从其…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...