Benutzerdefinierte Winkelkreisfortschrittsbalken SVG User Interface

Question

Ich habe meine Kreisfortschrittsbalken aus angular-circular-progress Github entwickelt.

Meine aktuelle Eingabe war:

Ich brauche das Ende des Fortschrittsbalkens mit einem klein CIRCLE und einem VALUE CENTER des kreisförmigen Fortschrittsbalkens mit echten Animation Wert ändern basierend auf Svg Bewegung. Wie kann ich das machen? Ich brauche wirklich Hilfe von euch allen Jungs.

sollte Mein erwartet ausgegeben werden:

Mein aktueller Auszug:

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

Sie bei ProgressBar.js Blick?

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 ist ein Fiddle

Grüße, Alex

Answer 2

Erstellen Sie eine Gruppe, die die Größe des Kreises ein transparentes Objekt hat und hat den kleinen Kreis an einer Kante, dann rotate, die Gruppe um sein Zentrum. Die Interna der SVG wäre so etwas wie

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

aussehen Dies nimmt der Durchmesser des Kreises 100 ist

Answer 3

Hier ist eine Funktion, die eine Zahl von 0 bis 100 in die x umwandelt, Y-Koordinaten benötigt geben den Kreis Objekt (gezeichnet mit Leinwand-Tools) eine Kreisbahn:

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

Schauen sie sich das Plunker, um zu sehen, sie in Aktion:

Dies nimmt die Zahl (0 bis 100), skaliert sie, wandelt sie in Radianten, wandelt dann die Bogenmaß in kartesischen Koordinaten.