如何使笔划变圆

Question

我正在创建一个进度圈，但我希望进度圈线的边缘是圆的，this is how it looks and this is how I want it to look。

这是我的代码

  const strokeWidth = 2;
  const center = size / 2;
  const radius = size / 2 - strokeWidth / 2;

       <Circle
          ref={progressRef}
          stroke="#FFF"
          cx={center}
          cy={center}
          r={radius}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
      />

Answer 1

您可以在要舍入的路径上使用 strokeLinecap 属性：

<Path
  stroke="black"
  fill="none"
  strokeLinecap="round"
  strokeWidth={strokeWidth}
  strokeDasharray={circumference}
/>

找到

如何使笔划变圆

how to make a stroke rounded

react-native

react-native-svg