使用dasharray和dashoffset计算进度圈背后

Question

我正在构建一个小的 angularjs 指令，它将显示一个进度圈（我不想要动画），中间会有一个文本指示完成的百分比。圆圈的html代码为：

   <path fill="none" stroke="rgb(0,51,117)" stroke-width="5" stroke-linecap="square" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5" stroke-dasharray="105" stroke-dashoffset="{{circle.percentage*(-140)/100 + 105 }}">
    </path>

我不知道dasharray和dashoffset后面的计算，我{{circle.percentage*(-140)/100 + 105 }}通过调整dashoffset和猜测得到计算。

我有一个小提琴http://jsfiddle.net/ADukg/10992/

如您所见，它仅适用于 30% 到 70% 的圆圈。有谁知道它的正确计算方法吗？我使用 CSS 标签作为我的问题的标签之一，因为计算也应该在 CSS 中工作。先感谢您

Answer 1

你可以有两个相互重叠的圆圈。第一个圆圈是灰色轮廓，第二个圆圈是进度叠加。然后更改第二个圆的stroke-dasharray和stroke-dashoffset值并将 svg 旋转 90 度：

html：

<circle cx="25" cy="25" r="22.5" stroke="rgb(188,188,188)" stroke-width="5" fill="none"></circle>
<circle cx="25" cy="25" r="22.5" stroke="rgb(0,51,117)" stroke-width="5" fill="none" stroke-dasharray="{{circle.circumference}}" stroke-dashoffset="{{circle.circumference * (1 - circle.percentage/100)}}"></circle>

js：

function MyCtrl($scope) {
    var radius = 22.5;
    var circumference = Math.PI*(radius*2);
    $scope.circles = [];
    for(var i=0; i<=10; i++){
        var circle = {
            percentage : i* 10,
            circumference: circumference
      };
      $scope.circles.push(circle);
    }
}

css：

.progress {
    transform: rotate(-90deg);
}

链接到 jsfiddle

我发现本教程很有帮助。

Answer 2

你的圆的半径是 22.5，所以你的虚线数组的正确长度应该是

(2 * PI * 22.5) = 141.37

其次，您可以单独使用stroke-dasharray。stroke-dashoffset也无需使用。

stroke-dasharray="{{circle.percentage*142/100}} 142"

更新的小提琴

注意：我删除了stroke-linecap="square". 如果您故意添加它，您可能想把它放回去。