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背后的计算，我通过调整dashoffset和猜测来得到计算{{circle.percentage*(-140)/100 + 105 }}。

我有一个小提琴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);
}

Link to jsfiddle

我发现这个tutorial很有帮助。

Answer 2

圆的半径为22.5，因此短划线阵列的正确长度应为

(2 * PI * 22.5) = 141.37

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

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

Updated fiddle

注意：我删除了stroke-linecap="square"。如果您故意添加，可能需要将其重新添加。

使用dasharray和dashoffset进行循环后面的计算

2 个答案: