gpt4 book ai didi

javascript - 如何用n个切片画一个圆

转载 作者:行者123 更新时间:2023-12-03 06:56:58 25 4
gpt4 key购买 nike

我正在使用 react-native-svg 模块,我想画一个分成 n 片的圆圈。
我的圆半径是 41,圆心是 (50, 50)
例如对于 n=6 我想画这样的东西:

circle with 5 slics

最佳答案

我努力为您找到解决方案

但是一路上我学到了很多东西

基于 this article

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>
);
}
}


expo
codesandbox

option 1
option 2

关于javascript - 如何用n个切片画一个圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59338508/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com