自定义角度圆形进度条SVG用户界面

Question

我已经从angular-circular-progress github开发了我的循环进度条。

我目前的意见是：

我需要使用基于svg移动的实际动画值的圆形进度条的 CIRCLE 和 VALUE CENTER 来修改进度条的结尾。我怎么能这样做？我真的需要你们所有人的帮助。

我的预期输出应为：

我目前的片段：

＆＃13;

＆＃13;

angular.module('myModule', ['angular-circular-progress'])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://pencil.my/assets/js/circularProgress.js"></script>

<div ng-app="myModule">
<circular-progress
		    value="80"
		    max="100"
		    orientation="1"
		    radius="100"
		    stroke="10"
		    base-color="#fff"
		    progress-color="#f9991d"
		    iterations="100"
		    animation="easeInOutCubic"
		></circular-progress>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您是否看过 ProgressBar.js ？

var bar = new ProgressBar.Circle(container, {

    enter code herecolor: '#aaa',
   // This has to be the same size as the maximum width to
   // prevent clipping
   strokeWidth: 4,
   trailWidth: 1,
   easing: 'easeInOut',
   duration: 1400,
   text: {
        autoStyleContainer: false
   },
   from: { color: '#aaa', width: 1 },
   to: { color: '#333', width: 4 },
   // Set default step function for all animate calls
   step: function(state, circle) {
   circle.path.setAttribute('stroke', state.color);
   circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
    circle.setText(''); 
    } else {
    circle.setText(value);
}

Here是小提琴

此致 亚历

Answer 2

创建一个具有圆圈大小的透明对象的组，并在一个边缘处有一个小圆圈，然后围绕其中心分组rotate。 SVG的内部看起来像

<g id="pip" transform="rotate({{360/value}}, 50, 50)">
<!--contents of g-->
</g>

这假设圆的直径为100。

Answer 3

这是一个函数，它将0到100之间的数字转换为为圆形对象（使用画布工具绘制）提供圆形路径所需的x，y坐标：

function drawCircle(percentage, ctx) {
  var angle = percentage / 100.0;

  var xPos = 140 * Math.cos((angle * (2 * Math.PI)) - (Math.PI * .5));
  var yPos = -140 * Math.sin((angle * (2 * Math.PI)) - (Math.PI * .5) );

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.beginPath();
  ctx.arc (xPos + 150, 150 - yPos, 10, 0, 2 * Math.PI);
  ctx.stroke();
}

看看这个龙头看到它在行动： https://plnkr.co/edit/ePMK7DVLB3OH15oUJzr1?p=preview

这取数字（从0到100），缩放它，将其转换为弧度，然后将弧度转换为笛卡尔坐标。