鸿蒙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中显示会提示预览不可用(如下图所示),但不影响实际执行效果。

相关推荐
Yasin Chen8 小时前
Unity UI坐标说明
ui·unity
眠りたいです1 天前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
油炸自行车2 天前
【Qt】编写Qt自定义Ui控件步骤
开发语言·c++·qt·ui·自定义ui控件·qt4 自定义ui控件
IT古董3 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
yuanpan4 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
EndingCoder4 天前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
我命由我123455 天前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
CodingCos5 天前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
开开心心loky5 天前
[iOS] ViewController 的生命周期
macos·ui·ios·objective-c·cocoa
我命由我123455 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工