javascript - 如何用n个切片画一个圆
解决方案
我努力为您找到解决方案
但是一路上我学到了很多东西
基于这篇文章
import Svg, {Path} from 'react-native-svg';
import React from 'react';
import {View, StyleSheet} from 'react-native';
export default class SvgExample extends React.Component {
slice() {
let slices = [];
//option 1 Equal size pieces
slices.push({percent: 0.25, color: 'blue'});
slices.push({percent: 0.10, color: 'red'});
slices.push({percent: 0.28, color: 'green'});
slices.push({percent: 0.19, color: 'yellow'});
//option 2 Different size pieces
// const numberOfSlice = 6; //number for slice
// const colorArr = ['red', 'green', 'yellow', 'blue']; //color the slice
// for (let i = 0; i < numberOfSlice; i++) {
// slices.push({percent: 1 / numberOfSlice, color: colorArr[i] || 'gray'});
// }
let cumulativePercent = 0;
function getCoordinatesForPercent(percent) {
const x = Math.cos(2 * Math.PI * percent);
const y = Math.sin(2 * Math.PI * percent);
return [x, y];
}
let arr = [];
arr = slices.map(slice => {
const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
cumulativePercent += slice.percent;
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
'L 0 0', // Line
].join(' ');
return <Path d={pathData} fill={slice.color} key={pathData} />;
});
return arr;
}
render() {
return (
<View
style={[
StyleSheet.absoluteFill,
{alignItems: 'center', justifyContent: 'center'},
]}>
<Svg
height="100"
width="100"
viewBox="-1 -1 2 2"
style={{transform: [{rotate: '-90deg'}]}}>
{this.slice()}
</Svg>
</View>
);
}
}
推荐阅读
- php - RedisException php_network_getaddresses: getaddrinfo failed: 名称解析暂时失败
- ios - 从 photoLibrary 获取图像并显示在 tableview 单元格上?
- amazon-web-services - AWS EC2 - 如何在本地/文件系统创建备份
- android - Android 我只在 gradle 中更改 applicationId 并修复了错误。但我不知道为什么?
- numpy - 对于第二类切比雪夫多项式,numpy 中是否存在等价的 cheb2poly?
- angular - 无法以角度形式读取未定义的属性“id”
- php - 如何访问类对象以在 PHP 中显示总价?
- html - 媒体查询:为什么只有显示属性对我的媒体查询不起作用
- validation - 为 Go 中的元素列表添加验证
- css - css过滤器不适用于IE11