如何使用数据计算弧的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?