自定義角度圓形進度條SVG用戶界面

我已經從angular-circular-progress github開發了我的圓形進度條。自定義角度圓形進度條SVG用戶界面

我的電流輸入是：

我需要修改進度條的一端與小CIRCLE和基於與真正的動畫差值的圓形進度條的價值中心關於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>

來源

2016-09-26 Nere

我很高興看到任何人都可以修改我用過的現有庫http://pencil.my/assets/js/circularProgress.js – Nere

你看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是一個小提琴

問候，亞歷

來源

2016-09-26 18:44:57

還沒有。它使用角？我用角度js開發了我的項目。 – Nere

嗯，它不是用角度製作的，但是你可以在你的組件中使用它 –

我已經看過你的小提琴，但其變化總是筆畫寬度。動畫拍攝時，我只需要一個小圓圈就能領先中風。 – Nere

創建具有透明物體的圓的大小，並且具有小圓圈在一個邊緣處，然後rotate該組圍繞着一組它的中心。的SVG的內部會看起來像

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

這假定圓的直徑爲100

來源

2016-09-26 18:58:26

你能告訴我的片段？我沒有看到結果大聲笑..hohoho – Nere

我不知道我可以，因爲該片段不直接處理SVG。如果右鍵單擊該圓並選擇「檢查元素」，則會在類「base」中看到一個圓。在旁邊，你會添加一個帶有透明圓圈的組和一個小圓圈。 LOL HOHOHO。如果你想要這個自定義HOHO，你將不得不手動編輯SVG –

我使用這裏的庫http://pencil.my/assets/js/circularProgress.js來製作這個圓。如果我修改它，那對我來說會更困難。 – Nere

下面是一個從0轉換爲100到X的函數，y座標需要給Circle對象（用帆布工具繪製）的圓形路徑：

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

看這個plunker看到它在行動：

這需要數字（從0到100），縮放它，將其轉換爲弧度，然後將弧度轉換爲笛卡爾座標。

來源

2016-09-26 19:38:25

好的..好的圈子...我需要適應我的代碼..謝謝。 – Nere

自定義角度圓形進度條SVG用戶界面

回答

相關問題