鸿蒙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; ‌静态文件服务…

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

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

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

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

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的服务商基本都会…

【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;并作为…

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

目录 一、背景介绍二、思路&方案三、过程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;推动法…

【论文阅读】火星语义分割的半监督学习

【论文阅读】火星语义分割的半监督学习 文章目录 【论文阅读】火星语义分割的半监督学习一、介绍二、联系工作3.1Deep Learning for Mars3.2 数据集可以分为三类&#xff1a;3.3 半监督学习 三、提出的火星图像分割数据集四、方法四、实验 S 5Mars: Semi-Supervised Learning …

蓝桥杯 懒洋洋字符串--字符串读入

题目 代码 #include <iostream>using namespace std;int main(){int n;cin>>n;char s[210][4];int ans0;for(int i0;i<n;i){scanf("%s",s[i]);}for(int i0;i<n;i){char as[i][0];char bs[i][1];char cs[i][2];// cout<<a<< <<b…

免费送源码:Java+ssm+MySQL 在线购票影城 计算机毕业设计原创定制

摘要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设在线购票影城。 本设计…

Qt 软键盘设计

最近有客户用的电脑是触屏的&#xff0c;所以不用键盘与鼠标&#xff0c;系统的键盘不好看&#xff0c;所以自己设计一个键盘显示&#xff0c;先看下效果图&#xff1b; 设计思路&#xff0c;构建一个软键盘设计界面并重写输入框&#xff0c;然后做界面提升,直接上代码 class …

94.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删

目录 1.双向链表 2.结构体的定义 3.示意图 3.代码示例 1.双向链表的尾插 示意图 代码 main.c List.h List.c 详细分析代码的执行过程 双向链表的初始化 2.双向链表的打印 代码 3.双向链表的尾删 1.双向链表 以一种典型的双向链表为例:带头双向循环链表(带头:带…

区块链技术入门:以太坊智能合约详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术入门&#xff1a;以太坊智能合约详解 区块链技术入门&#xff1a;以太坊智能合约详解 区块链技术入门&#xff1a;以太…

Mybatis Plus 集成 PgSQL 指南

“哲学家们只是用不同的方式解释世界&#xff0c;而问题在于改变世界。” ——卡尔马克思 (Karl Marx) 解读&#xff1a;马克思强调了实践的重要性&#xff0c;主张哲学不仅要理解世界&#xff0c;更要致力于改造世界。 本文我们引入 Mybatis Plus 作为 ORM &#xff0c;并且使…