我已经基于教程(v。https://www.youtube.com/watch?v=UMvw20nRZls)创建了Arc Progress,并且运行良好
但是,由于我没有使用svg路径的经验,因此我正竭尽所能地尝试将其圆角弄圆
到目前为止,这是弧线的结果
const { PI,cos,sin } = Math;
const { width } = Dimensions.get('window');
const size = width - 32;
const strokeWidth = 20;
const AnimatedPath = Animated.createAnimatedComponent(Path);
const r = (size - strokeWidth) / 2;
const cx = size / 2;
const cy = size / 2;
const A = PI + PI * 0.4;
const startAngle = PI + PI * 0.2;
const endAngle = 2 * PI - PI * 0.2;
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
const x1 = cx - r * cos(startAngle);
const y1 = -r * sin(startAngle) + cy;
const x2 = cx - r * cos(endAngle);
const y2 = -r * sin(endAngle) + cy;
const d = `M ${x1} ${y1} A ${r} ${r} 0 1 0 ${x2} ${y2}`;
<Path
stroke="#FFF"
fill="none"
strokeDasharray={`${circumference},${circumference}`}
{...{ d,strokeWidth }}
/>
我希望有这样的角落:
ps:我正在使用一个expo应用程序,因此,我需要安装带有expo的react-native-svg才能工作