如何使用數據計算弧的SVG路徑？

Question

從理論上講，我有一個圓形的量表，可以在「x」時間過後填充。

我目前正在構建一個Web應用程序，我有我的圓弧工作用於調試目的，我現在需要做的是應用屬性，以便我們可以在應用程序日誌中的用戶時跟蹤應用程序中的圓形儀表

我該如何做到這一點，因此當用戶登錄時，他們發現他們在此圓形儀表上剩餘「x」時間量？下面

JS：

function describeArc(radius, startAngle, endAngle) { 

function polarToCartesian(radius, angle) { 
    return { 
     x: radius * Math.cos(angle), 
     y: radius * Math.sin(angle), 
    }; 
} 

var start = polarToCartesian(radius, endAngle); 
var end = polarToCartesian(radius, startAngle); 

var largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1; 

// Generate the SVG arc descriptor. 
var d = [ 
    'M', start.x, start.y, 
    'A', radius, radius, 1, largeArcFlag, 0, end.x, end.y 
].join(' '); 

return d; 
} 

let arc = 0; 

setInterval(function() { 
// Update the ticker progress. 
arc += Math.PI/1000; 
if (arc >= 2 * Math.PI) { arc = 0; } 

// Update the SVG arc descriptor. 
let pathElement = document.getElementById('arc-path'); 

pathElement.setAttribute('d', describeArc(26, 0, arc)); 
}, 400/0) 

我留下抓我的頭，因爲我是新來的SVG和JS。

謝謝！

Answer 1

您可以將當前arc值保存到localStorage，所以你以後可以檢索像這樣

function describeArc(...) { ... } 

let arc = localStorage.arc ? parseFloat(localStorage.arc) : 0; 

setInterval(function() { 
    // Update the ticker progress. 
    arc += Math.PI/1000; 
    if (arc >= 2 * Math.PI) { arc = 0; } 

    // Update the SVG arc descriptor. 
    let pathElement = document.getElementById('arc-path'); 

    pathElement.setAttribute('d', describeArc(26, 0, arc)); 

    // Persist the current arc value to the local storage 
    localStorage.setItem('arc', arc); 
}, 400/0) // Divided by 0?