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

效果图

画圆弧：

使用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.propsconst {length}=colorconst 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}render() {const {startAngle,angle,innerRadius,outerRadius,color,percent}=this.propsconst width=outerRadius*2console.log(color);// startAngle=startAngle-90const params=creatPolygon(startAngle,angle,width,percent);console.log(params);return (<div><divclassName="test"style={{width:`${width}px`,height:`${width}px`,borderRadius:`50%`,transform: `rotate(${startAngle -90}deg)`,background:`conic-gradient(${this.addColor()})`,WebkitMask:`radial-gradient(transparent ${innerRadius}px, #000 ${innerRadius}px)`,mask: `radial-gradient(transparent ${innerRadius}, #000 ${innerRadius})`,clipPath:`polygon(${params})`,}}></div>   </div>);}
}
export default Yuanhu;

yuanhu/polygon.js–生成clip-path需要的参数

export function creatPolygon(startAngle,angle,width,percent){const r=width/2;startAngle=(startAngle/180)*Math.PIconst ang=(((angle/180)*Math.PI)/3)*percent;  //均等分角度console.log("ang:",ang);const x=width/2;              //圆心x坐标const y=width/2;                            //圆心y坐标const as1=2*r*Math.sin(startAngle)const ac1=2*r*Math.cos(startAngle)const as2=2*r*Math.sin(startAngle+ang);const ac2=2*r*Math.cos(startAngle+ang)const as3=2*r*Math.sin(startAngle+2*ang);const ac3=2*r*Math.cos(startAngle+2*ang)const as4=2*r*Math.sin(startAngle+3*ang)const ac4=2*r*Math.cos(startAngle+3*ang)let p1=[x,y];let p2=[x+as1,y-ac1]let p3=[x+as2,y-ac2]let p4=[x+as3,y-ac3]let p5=[x+as4,y-ac4]console.log("p2:",p2);return [p1, p2, p3, p4, p5].map((arr) => {return arr.map((pos) => {return `${pos}px`;}).join(' ');}).join();
}

yuanhu-item/index.jsx

import React, { Component } from 'react';
import Yuanhu from '../yuanhu';
import "./index.css"class YuanhuItem extends Component {render() {return (<div className='yuanhu-box'><div className='yuanhu-bg'></div><Yuanhu startAngle={-30}angle={268}innerRadius={40}outerRadius={60}color={['#1ADBFF', '#45FF9D', '#F2BB00', '#FF6726']}percent={0.5}/></div>);}
}

export default YuanhuItem;

yuanhu-item/index.css
.yuanhu-box{width: 120px;height: 80px;position: absolute;overflow: hidden;
}
.yuanhu-bg{width: 120px;height: 120px;border-radius: 50%;background-color: #ccc;mask: radial-gradient(transparent 40px,#000 40px);position: absolute;
}

app.js

import React, { Component,Fragment } from 'react'
import YuanhuItem from './components/10-yuanhu/yuanhu-item'export default class App extends Component {render() {return (<Fragment><h1>app组件</h1><YuanhuItem/></Fragment>)}
}

react 画一个渐变圆弧（渐变，圆弧）相关推荐

vbs画动态爱心代码_前端必看之如何用CSS3画一个八卦和爱心
昨天雷雨交加,燥热有所缓解.今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心.那么,今天就用CSS3做些"不正紧"的事:画八卦和爱心. CSS3我们一般都是用来 ...
html5 --- 使用canvas画一个渐变矩形
我们希望得到如下效果: 首先准备画布 // HTML <canvas width="500" height="375" id ="a" ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
oc 画一个圆弧_SolidWorks一步扫描特征，就可以画出一个螺母，你有思路吗
建模过程: 1.在[上视基准面]画一个六边形.(引导线) 1-1.圆角,半径:2 ,框选六边形. 2.在[前视基准面]画草图如下:(轮廓) 2-1.左侧画一段竖直构造线,端点与圆弧穿透几何关系. 3. ...
GdiplusFlat（4）单色画刷和线性渐变画刷
本博文由CSDN博主zuishikonghuan所作,版权归zuishikonghuan所有,转载请注明出处:http://blog.csdn.net/zuishikonghuan/article ...
用css动画画一个不规则的渐变动态圆
这是一个gif动图,加载时间有点长,请耐心等待如何用div画一个圆 div原本是一个方的,如果要把它变成圆形就需用border-radius这个属性让元素变成圆角,设置的不同的值,会有不同的圆角. ...
java三点确定圆弧_圆弧方向判断方法和三点确定一个圆的计算方法
圆弧方向判断方法设p1=(x1,y1) p2=(x2,y2) p3=(x3,y3) 求向量 p12=(x2-x1,y2-y1) p23=(x3-x2,y3-y2) 则当 p12与p23的叉乘(向量积 ...
html设置一个正方形渐变,CSS3 渐变
CSS3 渐变(Gradients) 渐变效果 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
gdiplus判断一个点是否在圆弧线上_福建教师招聘考试小学数学面试教案：圆的认识...
开门见山地说:学科知识与教学能力教案设计知识点总结(查看更多) 闽小狮:2020年福建教师招聘面试公告汇总(持续更新中) 圆,根据欧几里得的<几何原本>定义,是在同一平面内到定点的距离等于 ...

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

效果图

画圆弧：

灰色圆弧背景

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

react 画一个渐变圆弧（渐变，圆弧）相关推荐

最新文章

热门文章