カスタム円形円形進捗バーSVGユーザーインターフェイス

Question

angular-circular-progress githubから円進行バーを開発しました。

私の現在の入力された：

私は小さなCIRCLEとプログレスバーとベースの実際のアニメーション値を持つ円形のプログレスバーのVALUEセンターの終わりを変更する必要がありますsvgの動き。私はそれをどのようにすることができますか？私は本当にあなたからすべての人の助けが必要です。

私の予想される出力は次のようになります。

私の現在のスニペット：

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

<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 
 
\t \t  value="80" 
 
\t \t  max="100" 
 
\t \t  orientation="1" 
 
\t \t  radius="100" 
 
\t \t  stroke="10" 
 
\t \t  base-color="#fff" 
 
\t \t  progress-color="#f9991d" 
 
\t \t  iterations="100" 
 
\t \t  animation="easeInOutCubic" 
 
\t \t ></circular-progress> 
 
    </div>

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

であるXに0から100まで番号を変換する関数に必要なy座標であります（キャンバスツールで描かれた）円オブジェクトに円形経路を与える：アクションでそれを参照するには、このplunkerで

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(); 
} 

ルック：

これは、数値（0〜100）を取り、それをスケールし、ラジアンに変換し、次にラジアンをデカルト座標に変換します。