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