react 画一个渐变圆弧（渐变，圆弧）

最新推荐文章于 2024-08-19 17:55:37 发布

luo121578

最新推荐文章于 2024-08-19 17:55:37 发布

阅读量940

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/luo121578/article/details/126974918

版权

本文介绍如何在React中创建一个渐变圆弧。通过clip-path属性利用五个点绘制圆弧，解释了各点的位置关系，并提供了一个灰色圆环作为背景。组件实现主要依赖于六个参数，涉及到Math.sin等数学函数以及角度转换。示例代码包括yuanhu/index.jsx、yuanhu/polygon.js和yuanhu-item/index.jsx。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

画圆弧：

在这里插入图片描述

使用clip-path五点画圆弧：
第一个点：圆点
第二个点：圆弧开始起点
第三和第四个点：把起点和重点的弧线分成均等三段的两个点
第五个点：终点
圆外的四个点距离圆心是2r。为什么是2r呢？因为当圆弧是360度（也就是一个圆时），点与点两两连线，线刚刚好与圆相切，

灰色圆弧背景

写一个灰色圆环作为背景即可
圆环：圆角边框+mask(遮盖) 实现
注意点：
1.角度的方向：
在这里插入图片描述

2.Math.sin
js涉及角度的Math函数里面的参数都是弧度值（就是2Math.PI=360,用的是前者）

使用组件主要需要六个参数：

startAngle={
   324}    //弧线起始角度
angle={
   252}         //弧线横跨角度
innerRadius={
   40}    //内圆半径
outerRadius={
   60}    //外圆半径
color={
   ['#1ADBFF', '#45FF9D', '#F2BB00', '#FF6726']}   //弧型渐变颜色数组
percent={
   arcPercent}   //弧线站总弧线的百分比

yuanhu/index.jsx

import React, {
    Component } from 'react';
import "./index.css"
import {
   creatPolygon} from "./polygon"

class Yuanhu extends Component {
   
    addColor=()=>{
   
        const {
   color,angle}=this.props
        const {
   length}=color
        const fillNum=length/(angle/360);
        console.log("fillNum",fillNum,length);
        let fillColor=color;
        for(let i =0;i<(fillNum-length);i++){
   
            fillColor.push("red")
        }
        console.log("fillcolor:",fillColor);
        return fillColor
    }
    ren