【发布时间】：2021-11-17 00:48:05
【问题描述】：
我想用 React 和 React Native 来实现这个设计
[![在此处输入图片描述][1]][1]
我尝试使用这个包： React Circle Progressbar
但我无法实现这个设计，所以任何人都可以帮我解决这个问题
我将与您分享我的完整组件，希望它能让您对当前状态有所了解
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians),
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
var d = [
'M',
start.x,
start.y,
'A',
radius,
radius,
0,
largeArcFlag,
0,
end.x,
end.y,
].join(' ');
return d;
}
【问题讨论】：
-
请发布您到目前为止所尝试的内容
-
你可以检查一下，我试过这个方法但我没有实现设计我也使用了描述中的包，没有帮助，@Erik McKelvey
-
您发布了两个函数的代码，但没有发布组件的外观。请添加您当前实现的屏幕截图
标签： html css reactjs react-native svg