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?

如何使用数据计算弧的SVG路径？

1 个答案: