1

我已经根据教程（v. https://www.youtube.com/watch?v=UMvw20nRZls）创建了 Arc Progress 并且工作正常

但是，由于我没有使用 svg 路径的经验，我正在努力使用我的 Arc 试图让它的角落变得圆润

这是到目前为止 Arc 的结果

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 应用程序，所以，我需要安装 react-native-svg 和 expo 才能工作

4

1 回答 1

2

您可以将strokeLinecap道具设置Path为round：

<Path
  stroke="black"
  fill="none"
  strokeLinecap="round"
  strokeDasharray={`${circumference}, ${circumference}`}
  {...{d, strokeWidth}}
/>

strokeLinecap 属性指定在打开子路径被描边时要在其末尾使用的形状。可以是“对接”、“方形”或“圆形”。

来源：https ://github.com/react-native-community/react-native-svg#common-props 。

于 2020-10-02T17:49:37.260 回答