鸿蒙UI开发——实现环形文字

1、背 景

有朋友提问:您好关于鸿蒙UI想咨询一个问题 如果我想实现展示环形文字是需要通过在Text组件中设置transition来实现么,还是需要通过其他方式来实现。

针对这位粉丝朋友的提问,我们做一下解答。

2、实现环形文字效果

❓ 什么是环形文字效果?

这位朋友没有给出具体想要的环形文字的描述,按照我的理解,环形文字效果大致如下:

图片

⭐️ 问题分析

在鸿蒙开发中,通过文字样式设置很难达到环形文字效果,如果想实现,我这边首先想到的是,使用RichText富文本组件去实现这个效果。(RichText富文本组件的使用在之前的文章中有介绍,详见鸿蒙UI系统组件17——富文本展示(RichText))

如果直接通过富文本样式设置还不太好做到环形效果,我的实现思路是:我们通过SVG去绘制一个圆形路径,文本按照这个圆形路径去渲染文字。

实现方法介绍如下:

👉🏻 step 1:创建一个svg,里面包含一个圆形路径path定义

代码如下(需要注意的是,我们为了保证只有简单的一个path定义,为<path>标签添加了 fill='none'属性,表示不做填充色):

<svg viewBox="0 0 100 100">   <path fill='none' d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path></svg>

👉🏻 step 2:创建一个文本节点,按照step 1中描述的path绘制

代码如下(textPath指向了step1创建的id为circle的path):

<svg viewBox="0 0 100 100">   <path fill='none' d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>   <text font-size='16'  fill='red'>       <textPath xlink:href="#circle">          这是一个环形文字效果,这是一个环形文字效果,       </textPath>   </text></svg>

👉🏻 step 3:创建一个容器包裹并设置一些字体颜色和字体大小等属性

代码如下:​​​​​​​

<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">  <svg style="overflow: visible; display: inline-block;" viewBox="0 0 100 100" width="300" height="300">       <path fill='none' d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>       <text font-size='16'  fill='red'>           <textPath xlink:href="#circle">              这是一个环形文字效果,这是一个环形文字效果,           </textPath>       </text>  </svg></div>

上面的代码中,我们将字体设置为了16,字体颜色设置为了red,并且设置了一个外接容器包裹。

3、完整代码

示例完整代码如下:​​​​​​​

@Entry@Componentstruct Index {  build() {    Row() {      Column() {        RichText(`        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">          <svg style="overflow: visible; display: inline-block;" viewBox="0 0 100 100" width="300" height="300">             <path fill='none' d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>             <text font-size='16'  fill='red'>               <textPath xlink:href="#circle">                  这是一个环形文字效果,这是一个环形文字效果,               </textPath>             </text>          </svg>        </div>        `)          .width(300)          .height(300)      }      .width('100%')    }    .height('100%')  }}

【PS:具体效果,具体参数可以根据业务场景做调整】

示例效果如下:

目前版本中,RichText在Preview中显示会提示预览不可用(如下图所示),但不影响实际执行效果。

图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468329.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…

Rust-AOP编程实战

文章本天成,妙手偶得之。粹然无疵瑕,岂复须人为?君看古彝器,巧拙两无施。汉最近先秦,固已殊淳漓。胡部何为者,豪竹杂哀丝。后夔不复作,千载谁与期? ——《文章》宋陆游 【哲理】文章本是不加人工,天然而成的,是技艺高超的人在偶然间所得到的。其实作者所说的“天成”…

Spark的Standalone集群环境安装

一.简介 与MR对比&#xff1a; 概念MRYARNSpark Standalone主节点ResourceManagerMaster从节点NodeManagerWorker计算进程MapTask&#xff0c;ReduceTaskExecutor 架构&#xff1a;普通分布式主从架构 主&#xff1a;Master&#xff1a;管理节点&#xff1a;管理从节点、接…

SpringBoot整合Sharding-JDBC实现读写分离

SpringBoot整合Sharding-JDBC实现读写分离 Sharding-JDBC实现读写分离&#xff0c;记得先要实现数据库的主从结构先。 1、Sharding-JDBC 简介 Sharding-JDBC 是的分布式数据库中间件解决方案。Sharding-JDBC、Sharding-Proxy 和 Sharding-Sidecar(计划 中)是 3 款相互独立的…

几个docker可用的镜像源

几个docker可用的镜像源 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; sudo rm -rf /etc/docker/daemon.json sudo mkdir -p /etc/dockersudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://d…

数字时代企业的基本数据丢失预防策略

在当今的数字时代&#xff0c;数据丢失预防对企业的重要性怎么强调也不为过。了解与数据丢失相关的风险至关重要&#xff0c;因为人为错误和网络攻击等常见原因可能会产生严重后果。 实施有效的数据丢失预防策略&#xff08;例如安全协议、定期数据备份和员工培训&#xff09;…

Android CCodec Codec2 (十九)C2LinearBlock

在上一篇文章的结尾&#xff0c;我们看到fetchLinearBlock方法最终创建了一个C2LinearBlock对象。这一节&#xff0c;我们将深入了解C2LinearBlock是什么&#xff0c;它的作用是什么&#xff0c;以及它是如何被创建的。 1、_C2BlockFactory 先对上一篇文章的结尾内容做简单回顾…

【EasyExcel】EasyExcel导出表格包含合计行、自定义样式、自适应列宽

目录 0 EasyExcel简介1 Excel导出工具类设置自定义表头样式设置自适应列宽添加合计行 2 调用导出工具类导出Excel表3 测试结果 0 EasyExcel简介 在数据处理和报表生成的过程中&#xff0c;Excel是一个非常常用的工具。特别是在Java开发中&#xff0c;EasyExcel库因其简单高效而…

SparkSql读取数据的方式

一、读取普通文件 方式一&#xff1a;给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二&#xff1a;直接调用对应数据源类型的方法 …

Linux相关概念和易错知识点(19)(HDD、Block group)

目录 1.HDD &#xff08;1&#xff09;HDD存储描述 &#xff08;2&#xff09;HDD结构图 &#xff08;3&#xff09;磁盘管理的分治思想 &#xff08;4&#xff09;硬盘中文件系统的整体划分图 2.Block group &#xff08;1&#xff09;文件管理 ①文件属性的存储 ②in…

IDEA构建JavaWeb项目,并通过Tomcat成功运行

目录 一、Tomcat简介 二、Tomcat安装步骤 1.选择分支下载 2.点击下载zip安装包 3.解压到没有中文、空格和特殊字符的目录下 4.双击bin目录下的startup.bat脚本启动Tomcat 5.浏览器访问Tomcat 6.关闭Tomcat服务器 三、Tomcat目录介绍 四、WEB项目的标准结构 五、WEB…

【C#】选课程序增加、删除统计学时

文章目录 【例6-2】编写选课程序。利用利用列表框和组合框增加和删除相关课程&#xff0c;并统计学时数1. 表6-2 属性设置2. 设计窗体及页面3. 代码实现4. 运行效果 【例6-2】编写选课程序。利用利用列表框和组合框增加和删除相关课程&#xff0c;并统计学时数 分析&#xff1…

Sigrity SPEED2000 Power Ground Noise Simulation模式如何进行电源地噪声分析操作指导-SODIMM

Sigrity SPEED2000 Power Ground Noise Simulation模式如何进行电源地噪声分析操作指导-SODIMM Sigrity Speed2000是时域仿真分析工具&#xff0c;Power Ground Noise Simulation模式可以观测器件的时域电压波形和观测电源地空间电压分布&#xff0c; 以下图为例进行分析 用Sp…

【CLIP系列】开篇

在多模态学习领域&#xff0c;CLIP无疑是一项具有里程碑意义的工作&#xff0c;自发布以来便引发了广泛关注。其在视觉-语言基础模型中的影响力极为深远&#xff0c;截至目前&#xff0c;该研究的引用量已突破23,000次&#xff0c;充分体现了其在学术界和工业界的重要地位。 为…

dell服务器安装ESXI8

1.下载镜像在官网 2.打开ipmi&#xff08;idrac&#xff09;&#xff0c;将esxi镜像挂载&#xff0c;然后服务器开机 3.进入bios设置cpu虚拟化开启&#xff0c;进入boot设置启动选项为映像方式 4..进入安装引导界面3.加载完配置进入安装 系统提示点击继 5.选择安装磁盘进行…

深度学习-神经网络基础-激活函数与参数初始化(weight, bias)

一. 神经网络介绍 神经网络概念 神经元构建 神经网络 人工神经网络是一种模仿生物神经网络结构和功能的计算模型, 由神经元构成 将神经元串联起来 -> 神经网络 输入层: 数据 输出层: 目标(加权和) 隐藏层: 加权和 激活 全连接 第N层的每个神经元和第N-1层的所有神经元…

栈(Stack)和队列(Deque、Queue)

文章目录 一、栈1.1 栈 VS 虚拟机栈 VS 栈帧1.2 数据结构 -- 栈介绍1.3 用数组模拟实现栈1.4 栈的功能&#xff1a;逆序打印 二、队列2.1 数据结果 -- 队列介绍2.2 用单链表模拟实现Queue队列 一、栈 1.1 栈 VS 虚拟机栈 VS 栈帧 区别&#xff1a; 栈&#xff1a;是一种数据结…

Spring Boot2.0之九 使用EasyExcel导出Excel

前言 SpringBoot项目实现Excel文件导出功能&#xff0c;可以使用alibaba开源项目EasyExcel实现。默认导出的Excel表头为宋体14加粗&#xff0c;表内容为宋体11。 一、引入EasyExcel依赖 <dependency><groupId>com.alibaba</groupId><artifactId>eas…

Java关于暴力破解MD5加密字符串示例

最近看到一个系统的用户密码直接就是用MD5加密的方式存在数据库的&#xff0c;而且也没有加盐&#xff0c;顿时有些好奇&#xff0c;因为一直听说MD5加密不够安全&#xff0c;很容易碰撞攻击&#xff0c;但是这个容易是有多容易&#xff0c;如果要破解一个MD5加密的密码大概要多…

我国成功发射航天宏图PIESAT-2 01~04星

11月9日11时39分&#xff0c;我国在酒泉卫星发射中心使用长征二号丙运载火箭&#xff0c;成功将航天宏图PIESAT-2 01&#xff5e;04星发射升空&#xff0c;卫星顺利进入预定轨道&#xff0c;发射任务获得圆满成功[1]。 航天宏图信息技术股份有限公司&#xff08;以下简称“航天…