有没有办法像 ionic 3 中的图像那样制作圆形进度条？答案

【问题标题】：Is there a way to make a circular progress bar like the one in the image in ionic 3?有没有办法像 ionic 3 中的图像那样制作圆形进度条？
【发布时间】：2019-07-16 12:03:09
【问题描述】：

我正在尝试制作一个类似于附图中的圆形进度条。我看过以下的：

它们是提供半圆的，但我看到的不是半圆，而是更多。

我想知道周围是否有任何我需要的东西，如果没有，我该如何修改当前可用的东西来满足我的需求。

【问题讨论】：

标签： ionic-framework svg ionic3 progress-bar

【解决方案1】：

像这样？

通过更改dialColours 数组来设置表盘颜色。您还可以设置表盘大小（dialRadius）和粗细（dialThickness）。

通过将百分比传递给setProgress()来设置进度。

const dialColours = [
  { colour: 'rebeccapurple', range: 6.5 },  // range is percentage of dial range
  { colour: 'pink',          range: 6 },    // values should add to 100 (%)
  { colour: 'chocolate',     range: 10 },
  { colour: 'dodgerblue',    range: 15 },
  { colour: 'limegreen',     range: 18 },
  { colour: 'gold',          range: 16 },
  { colour: 'tomato',        range: 28.5 }
];

function initialiseDial()
{
  const dialAngleRange = 270;  // deg
  const dialRadius = 60;
  const dialThickness = 20;
  const dial = document.getElementById("dial");

  // Add the colour sections to the dial
  var colourStartAngle = 90 + dialAngleRange / 2;
  const r = dialRadius + dialThickness;
  var start = polar2cartesian(colourStartAngle, r);
  dialColours.forEach(col => {
    // Find third point point of colour sector triangle
    let endAngle = colourStartAngle - (col.range * dialAngleRange / 100);
    let end = polar2cartesian(endAngle, r);
    // Create the sector using an SVG polygon
    const path = document.createElementNS(dial.namespaceURI, "path");
    path.setAttribute("d", ['M', 0, 0,
                            'L', start.x, start.y, 
                            'A', r, r, 0, 1, 1, end.x, end.y,
                            'Z'].join(' '));
    path.setAttribute("fill", col.colour);
    dial.appendChild(path);
    // Step to next colour angle
    colourStartAngle = endAngle;
    start = end;
  });

  // Initialise the progress bar
  const progressBar = document.getElementById("progress-bar");
  start = polar2cartesian(90 + dialAngleRange / 2, dialRadius);
  const end = polar2cartesian(90 - dialAngleRange / 2, dialRadius);
  progressBar.setAttribute("d", ['M', start.x, start.y, 
                                 'A', dialRadius, dialRadius, 0, 1, 1, end.x, end.y].join(' '));
  progressBar.setAttribute("stroke-width", dialThickness);
  
}


function deg2rad(deg) {
  return deg * Math.PI / 180;
}

function polar2cartesian(angle, radius) {
  return {
    x: radius * Math.cos(deg2rad(angle)),
    y: radius * -Math.sin(deg2rad(angle))
  }
}


// Set the profress about
function setProgress(percentage) {
  const progressBar = document.getElementById("progress-bar");
  progressBar.setAttribute("stroke-dasharray", [percentage, 100].join(' '));
}


initialiseDial();

setProgress(100);

svg {
  width: 200px;
}

<svg viewBox="0 0 160 160">
  <defs>
    <mask id="dial-mask">
      <path id="progress-bar" d="" fill="none" stroke="white" pathLength="100"/>
    </mask>
  </defs>
  <!--image href="https://i.stack.imgur.com/9aLrI.png" width="175" height="152"/-->
  <g id="dial" transform="translate(80, 80)" mask="url(#dial-mask)">
  </g>
</svg>

【讨论】：

精彩的解释。正是我需要的。我会检查一下。我想在离子项目中添加它。我将尝试在相同的情况下使用此逻辑。

【解决方案2】：

您可以使用这个使用 SVG 的 Angular 模块来创建圆形进度条

http://crisbeto.github.io/angular-svg-round-progressbar/

【讨论】：