angularjs 用dasharray和dashoffset实现进度圆的计算

ajsxfq5m  于 11个月前  发布在  Angular
关注(0)|答案(3)|浏览(101)

我正在构建一个小的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中工作。提前谢谢你

nwo49xxi

nwo49xxi1#

你可以有两个互相覆盖的圆。第一个圆是灰色轮廓,第二个圆是进度覆盖。然后只改变第二个圆的stroke-dasharraystroke-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很有用。

nx7onnlm

nx7onnlm2#

对于任何想知道的人,如果你正在制作一个环形饼图,计算stroke-dasharray的公式应该是:𝝿(width-thickness)(假设厚度+ innerCircleRadius +厚度=宽度= outerCircleRadius)

yvgpqqbh

yvgpqqbh3#

圆的半径为22.5,因此破折号数组的正确长度应为

(2 * PI * 22.5) = 141.37

字符串
第二,你可以只使用stroke-dasharray本身。不需要也使用stroke-dashoffset

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


Updated fiddle

  • 注意:我删除了stroke-linecap="square"。如果你故意添加的话,你可能想把它放回去。*

相关问题