鸿蒙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.mzph.cn/news/885407.shtml

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

相关文章

搭建轻量级文件服务器Dufs

前言 Dufs是什么&#xff1f; 答&#xff1a;是一款轻量级文件管理服务器&#xff0c;类似于FTP服务器但又比FTP更好用易于管理。 Dufs有什么特性&#xff1f; 答&#xff1a; ‌静态文件服务…

什么时候用 Tailwind 什么时候用 CSS

结合自己开发项目&#xff0c;进行整理 对比图 特性/场景Tailwind CSS普通 CSS常见布局✅ margin, padding, flex, grid⚠️ 可用但繁琐基础样式✅ 颜色、字体、间距等预设值⚠️ 需要手动定义响应式设计✅ sm:, md:, lg: 前缀⚠️ 需要写 media queries特定数值❌ 受限于预设…

【软考】系统分析师第二版 新增章节 第20章微服务系统分析与设计

微服务系统是一类基于微服务架构风格的分布式系统&#xff0c;它将应用程序拆分成多个独立的小型服务&#xff0c;每个服务都运行在独立的进程中&#xff0c;并采用轻量级通信协议进行通信。这些服务可以由不同的团队开发、不同的编程语言编写&#xff0c;并且可以按需部署。微…

JS类型检测大全:从零基础到高级应用

文章目录 1. typeof 操作符typeof null 为什么是 object 2. instanceof 操作符3. Object.prototype.toString.call()&#xff08;最准确的&#xff09;4. Array.isArray()5. constructor 属性总结 在JavaScript中&#xff0c;有多种方法可以用来检测数据类型。每种方法都有其特…

基于SSM的校园美食交流系统【附源码】

基于SSM的校园美食交流系统 效果如下&#xff1a; 管理员主页面 用户主页面 美食信息页面 美食资讯页面 修改密码页面 论坛中心页面 研究背景 随着高校信息化建设的不断推进&#xff0c;校园生活日益丰富多样&#xff0c;学生对于美食的需求与探索也愈发旺盛。然而&#xff…

css实现div被图片撑开

固定好盒子的宽度&#xff0c;高度随传过来的图片大小决定 <div class"tab-con"> <img:src"concertInfo.detail"alt""> </div>.tab-con {margin-bottom: 20px;width: 700px;img {width: 700px;height: auto;object-fit: cont…

PICO+Unity MR空间网格

官方链接&#xff1a;空间网格 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

斗破QT编程入门系列之前言:认识Qt:获取与安装(四星斗师)

本系列是在学习完C之后&#xff0c;然后通过Qt构建界面来&#xff0c;赋予枯燥的代码新的样貌&#xff0c;这样我们才能开发出更人性化的程序&#xff0c;同时会进一步提高初学者对编程的兴趣&#xff0c;大家加油&#xff0c;斗破Qt来了。 斗破Qt目录&#xff1a; 斗破Qt编程…

PyTorch核心概念:从梯度、计算图到连续性的全面解析(三)

文章目录 Contiguous vs Non-Contiguous TensorTensor and ViewStrides非连续数据结构&#xff1a;Transpose( )在 PyTorch 中检查Contiguous and Non-Contiguous将不连续张量&#xff08;或视图&#xff09;转换为连续张量view() 和 reshape() 之间的区别总结 参考文献 Contig…

家庭宽带如何开启公网ipv4和ipv6

好久没更新了&#xff0c;最近在家里折腾nas。一来自己有下电影的习惯&#xff0c;二来手机的icloud容量也不够了。所以买了群晖的423,但是nas要想用的畅快&#xff0c;外网访问必不可少。所以我之前研究了下&#xff0c;打家里的电信快带打通了外网。 一般nas的服务商基本都会…

ORACLE创建用户之后查询不到创建的用户

CREATE USER hr1 IDENTIFIED BY hr123DEFAULT TABLESPACE test_spacTEMPORARY TABLESPACE temp_spacQUOTA UNLIMITED ON test_spac;如果是按照这样创建的&#xff0c;Oracle 会将 hr1 转换为大写&#xff0c;因此在数据库中存储的用户名为 HR1 查询的时候要这样编写sql语句 S…

【Linux】Ansible集中化运维工具(详解)安装、常用模块、playbook脚本

文章目录 一、Ansible安装及远程控制1、关闭防火墙和SELinux2、安装ansible3、配置SSH无密码登录1、在管理机上生成一对密钥2、将公钥下发到远程主机3、保管密钥 4、主机目录 二、常用模块1、setup模块2、copy模块3、file模块4、shell模块5、script模块6、ping模块7、group模块…

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类网络连接中包含环路的 神经网络的总称。 给定一个序列&#xff0c;RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度&#xff0c;历史状态被循环累积&#xff0c;并作为…

Flink处理无界数据流

Apache Flink 是一个专为处理无界和有界数据流而设计的流处理框架。处理无界数据流的关键在于能够实时处理不断到达的数据&#xff0c;并且保证处理的正确性和高效性。以下是Flink处理无界数据流的主要步骤和技术&#xff1a; 1. 数据源 (Source) 无界数据流的第一个步骤是从…

oracle服务器意外宕机数据库启动失败故障处理记录

客户反馈由于服务器意外宕机&#xff0c;导致数据库业务不能正常运行&#xff0c;经过一番努力后通过redo日志恢复成功&#xff01; 故障描述&#xff1a;ORA-00600: 内部错误代码, 参数: [krctcr_4], [1179922061], [1179942042], [], [], [], [], [], [], [], [], [] 现将主要…

第二十九篇——线性代数:“矩阵”到底怎么用?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 数学中的线性代数&#xff0c;再生活中的落地和应用&#xff0c;是我这个…

nodejs:下载,安装,系统环境配置,更换镜像

​​​​下载 地址&#xff1a;https://nodejs.org/zh-cn/download/prebuilt-installer 安装包 开始安装 安装完成 给文件夹添加权限 创建两个文件夹 node_cache node_global 更新环境变量 修改环境变量&#xff0c;新的全局模块路径&#xff0c;这样在任何位置运行命令时都…

AMD显卡低负载看视频掉驱动(chrome edge浏览器) 高负载玩游戏却稳定 解决方法——关闭MPO

2024.11.9更新 开关mpo ulps 感觉有用但是还是掉驱动&#xff0c;现在确定是window顶驱动问题 按网上的改注册表和组策略会让自己也打不上驱动 目前感觉最好的办法就是&#xff0c;重置此电脑&#xff0c;然后你就摆着电脑挂个十分钟半小时别动&#xff0c;一开始他是不显示…

案例精选 | 河北省某检察院安全运营中异构日志数据融合的实践探索

河北省某检察院是当地重要的法律监督机构&#xff0c;肩负着维护法律尊严和社会公平正义的重要职责。该机构依法独立行使检察权&#xff0c;负责对犯罪行为提起公诉&#xff0c;并监督整个诉讼过程&#xff0c;同时积极参与社会治理&#xff0c;保护公民权益&#xff0c;推动法…

srs http-flv处理过程

目录 处理tcp请求,创建HttpConn 解析 http request创建consumer 读取consumer数据转封装为flv 处理tcp请求,创建HttpConn 调用堆栈如下: srs!SrsHttpConn::SrsHttpConn(ISrsHttpConnOwner*, ISrsProtocolReadWriter*, ISrsHttpServeMux*, std::__1::basic_string<ch…