svg画扇形进度动画

有人问下面这种图好怎么画?svg

想了下,确实用svg可以,可以这么设计

外层是一个容器放置内容,并且设置overflow:hidden, 内层放一个半径大于容器宽高一半的svg,并定位居中,然后svg画扇形,动态调整path来画不同程度的扇形即可。

那首先要学习一下svg怎么画一个扇形了?如下,画了一个四分之一的圆,即扇形

<svg width="200" height="200" viewBox="0 0 200 200"><path d="M 100,100 L100,0 A100,100 0 0 1 200,100Z" fill="rgba(163,163,163,0.5)" /></svg>

svg基础知识就不说了,扇形的path用到了弧线arc,格式如下:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

结合上面代码,显示Move到(100,100)即圆心位置,然后画直线到(100,0),开始画弧线, A跟着的是椭圆的两个半径,扇形两个取值一样(100,100)

最后的x,y 指的是另一个顶点坐标,根据几何图形来算坐标应该是:

x = rx + r*sinθ

y = ry - r*cosθ

所以其实基本上只要有rx、ry以及扇形弧度角θ,就能画出对于的扇形。至于x-axis-rotation、large-arc-flag、sweep-flag,只要考虑large-arc-flag取0还是1即可。

当θ角度大于180°时,取 1 即可。

再细化一下,这里用来表示0-100的进度,0-100怎么转换成弧度θ呢?或者如何计算呢?

θ = 进度值/100 × 2π

0-100,相当于0°-360°,根据数学知识,我们知道360°的弧度就是2π,因此上述公式就可以算出θ值,再用Math.cos和Math.sin就能算出三角函数值。

效果:

https://codepen.io/shellphon-the-encoder/pen/VwNoXEp 

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

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

相关文章

线程的组成、执行特点、创建的两种方式

线程的组成&#xff1a; cpu时间片 运行内存&#xff1a;栈、堆 线程的逻辑代码 线程执行的特点&#xff1a; 抢占式执行&#xff0c;结果随机&#xff0c;效率高&#xff0c;可以防止单一线程长时间独占CPU 在单核cpu中&#xff0c;宏观上同时执行&#xff0c;微观上顺序…

ABC猜想:数论中的未解之谜

ABC猜想&#xff1a;数论中的未解之谜 引言 ABC猜想是数论领域中一个著名的未解问题&#xff0c;它由法国数学家约瑟夫奥斯特莱&#xff08;Joseph Oesterl&#xff09;和大卫马瑟&#xff08;David Masser&#xff09;在1985年提出。ABC猜想涉及整数加法和乘法之间的深刻联系…

C++青少年简明教程之一:基础知识

C青少年简明教程之一&#xff1a;基础知识 电脑程序设计&#xff08;Computer programming&#xff09;&#xff0c;或称程序设计&#xff08;programming&#xff09;&#xff0c;是给出解决特定问题程序的过程&#xff0c;程序设计往往以某种程序设计语言为工具&#xff0c;给…

【算法】逃离大迷宫

题目信息 在一个 10^6 x 10^6 的网格中&#xff0c;每个网格上方格的坐标为 (x, y) 。 现在从源方格 source [sx, sy] 开始出发&#xff0c;意图赶往目标方格 target [tx, ty] 。数组 blocked 是封锁的方格列表&#xff0c;其中每个 blocked[i] [xi, yi] 表示坐标为 (xi, …

【软件测试】用例篇 -- 详解

一、测试用例的基本要素 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素。&#xff08;注意&#xff1a;不需要执行结果&#xff0c;因为执行结果…

IO 5.8日

1&#xff1a;使用 dup2 实现错误日志功能 使用 write 和 read 实现文件的拷贝功能&#xff0c;注意&#xff0c;代码中所有函数后面&#xff0c;紧跟perror输出错误信息&#xff0c;要求这些错误信息重定向到错误日志 err.txt 中去 2&#xff1a;判断一个文件是否拥有用户可写…

python在Django中实现文件上传功能主要涉及几个步骤

在Django中实现文件上传功能主要涉及几个步骤。以下是一个基本的指南,用于在Django应用程序中设置文件上传: 设置模型 首先,你需要在模型中定义一个FileField或ImageField。对于图像,ImageField更为合适,因为它包含对图像大小调整和其他图像相关功能的验证。 python 复…

OpenFeign 定义后备工厂进行服务降级

OpenFeign 定义后备工厂进行服务降级可以使得远程接口调用失败时进行降级处理&#xff0c;而不会直接报错&#xff0c;影响后续代码逻辑。定义后备工厂的步骤如下&#xff1a; 远程接口处定义。 FeignClient(value ServiceConstants.SYSTEM, fallbackFactory RemoteFileFallb…

Android单行字符串末尾省略号加icon,图标可点击

如图 设置仅显示单行字符串&#xff0c;末尾用省略号&#xff0c;加跟一个icon&#xff0c;icon可点击 tvName.text "test"val drawable ResourcesCompat.getDrawable(resources, R.mipmap.icon_edit, null)tvName.setCompoundDrawablesWithIntrinsicBounds(null,…

【如此简单!数据库入门系列】之无序不代表混乱 -- 堆文件

文章目录 前言堆文件链表实现页目录实现总结系列文章 前言 还记得上次遗留的问题吗&#xff1f; 以什么组织方式将数据保存在磁盘中&#xff1f; 今天我们接着讨论这个问题。 首先想一个问题&#xff1a;有一天&#xff0c;你开着自己心爱的大型SUV去超市购物。在停车场入口看…

威客网上招标系统(五)

目录 5 详细设计 5.1 系统首页 5.1.1系统首页&#xff08;网站首页index.jsp&#xff09; 5.1.2 下沙派威客网首页界面说明 5.2 站内新闻信息 5.2.1站内新闻操作界面 5.2.2系统主操作界面说明 5.3威客在线操作界面 5.3.1 威客在线操作界面 5.3.2威客在线说明 5.4系统…

langchain 数据向量化存储

中文向量化模型候选&#xff1a; 1、sentence-transformers/all-MiniLM-L6-v2 2、BAAI/bge-m3 3、多语言模型&#xff1a;BAAI/bge-m3 支持的输入长度<8192 from langchain_community.embeddings import HuggingFaceBgeEmbeddings model_name "sentence-transforme…

文件IO-使用dup2实现错误日志功能及判断文件权限,并终端输出

1&#xff1a;使用 dup2 实现错误日志功能 使用 write 和 read 实现文件的拷贝功能&#xff0c;注意&#xff0c;代码中所有函数后面&#xff0c;紧跟perror输出错误信息&#xff0c;要求这些错误信息重定向到错误日志 err.txt 中去 代码&#xff1a; #incl…

CP AUTOSAR之AUTOSAR OS详细说明(二)(正在更新中)

本文遵循autosar标准:R22-11 1 - 7章请参阅 CP AUTOSAR之AUTOSAR OS详细说明(一): https://blog.csdn.net/sehanlingfeng/article/details/138585435 8 API规范 本章包含操作系统提供的API。请注意,并非所有服务都适用于所有可伸缩性类别,并且某些服务的行为针对特定可…

kubectl_入门_Pod控制器

Pod控制器 在k8s中&#xff0c;按照pod的创建方式可以将其分为两类 自主式pod&#xff1a;k8s直接创建出来的pod&#xff0c;这种pod删除后就没有了&#xff0c;也不会重建控制器创建的pod&#xff1a;通过控制器创建的pod&#xff0c;这种pod删除了之后还会自动重建 1. 什么…

一张贴纸50万,炒房炒币的怎么都来炒CSGO皮肤了

一张贴纸50万&#xff0c;为什么炒房炒币的都来炒CSGO饰品了&#xff1f; 一张贴纸50万&#xff0c;炒房炒币的怎么都来炒CSGO皮肤了&#xff1f; 经常有人问我&#xff0c;天天看你们买卖装备&#xff0c;买卖皮肤&#xff0c;说到底这都是虚拟产品&#xff0c;看得见摸不着的…

Java与C语言的对比及其应用场景

Java和C语言在多个方面存在显著的差异&#xff0c;这些差异不仅体现在它们的语法、特性和性能上&#xff0c;还体现在它们的应用场景上。以下是关于这两种语言的详细对比&#xff1a; 一、语言特性 Java&#xff1a;Java是一种面向对象的高级编程语言&#xff0c;它强调代码的…

Java_从入门到JavaEE_11

一、抽象类及抽象方法 1.认识抽象类及抽象方法 应用场景&#xff1a;当一个方法必须在父类中出现&#xff0c;但是这个方法又不好实现&#xff0c;就把该方法变成抽象方法&#xff0c;交给非抽象的子类去实现 实例&#xff1a; //抽象类 public abstract class 类名{//抽象方…

element-ui table sortable排序 掉后端接口方式

实例: 官方解释:如果需要后端排序&#xff0c;需将sortable设置为custom&#xff0c;同时在 Table 上监听sort-change事件&#xff0c;在事件回调中可以获取当前排序的字段名和排序顺序&#xff0c;从而向接口请求排序后的表格数据。 1.table上要加 sort-change"sortCha…

鸿蒙OpenHarmony开发板:【子系统配置规则】

子系统 子系统配置规则 通过build仓下的subsystem_config.json可以查看所有子系统的配置规则。 {"arkui": {"path": "foundation/arkui", # 路径"name": "arkui" # 子系统名},"ai": {&q…