使用 React 构建自定义循环进度条

Question

我想用 React 和 React Native 实现这个设计

[![在此处输入图片描述][1]][1]

但是我无法实现这个设计，所以谁能帮我解决这个问题

我将与您分享我的完整组件，希望它能让您对当前状态有所了解

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

Answer 1

在纯 SVG 中，类似这样的东西。渐变并不完美，但接近...“进度”的长度可以用 stroke-dasharray.

进行调整

<svg viewBox="0 0 200 210" width="200">
  <defs>
    <mask id="m1">
      <circle cx="100" cy="105" r="55" fill="white"/>
    </mask>
    <linearGradient id="lg1" gradientTransform="rotate(0) skewX(-20) skewY(-40)">
      <stop offset="0"  stop-color="red" />
      <stop offset="75%" stop-color="orange" />
    </linearGradient>
  </defs>
  <image mask="url(#m1)" href="https://i.stack.imgur.com/ptG0J.png" width="200" />
  <path pathLength="360" d="M100 175 a 75 75 0 1 1 1 0"
    stroke="LightSlateGray" fill="none" stroke-width="30"
    stroke-linecap ="round" stroke-dasharray="270 360"
    stroke-dashoffset="-45"/>
  <path pathLength="360" d="M100 175 a 75 75 0 1 1 1 0"
    stroke="url(#lg1)" fill="none" stroke-width="15"
    stroke-linecap ="round" stroke-dasharray="180 360"
    stroke-dashoffset="-45"/>
  <g transform="translate(100 180)" font-size="16" font-family="sans-serif" font-weight="bold" text-anchor="middle">
    <text>Overall</text>
    <text transform="translate(0 20)">Wellbeing</text>
  </g>
</svg>

使用 React 构建自定义循环进度条

build a Custom Circular Progress bar with React

html

css

svg

reactjs

react-native