【发布时间】：2021-08-06 06:41:57
【问题描述】：
我正在使用此处提供的备选方案之一 (CSS Progress Circle) 构建一个带有进度圈的待办事项列表。在我的 script.js 中，我定义了函数 drawRingProgress()，当我在脚本末尾执行它时，它会呈现画布。
当我的脚本的其他功能被执行以添加任务、编辑、删除或将它们标记为完成时，参数pendingTasks 和completedTasks 得到更新。但是，如果我在其他提到的函数中调用函数drawRingProgress()，为了更新进度，画布会在其他地方多次错误地绘制（取决于这些函数所作用的 HTML 元素）。呈现更新的进度百分比的正确方法是什么？
链接到工作示例：https://jsfiddle.net/tailslider13/f4qtmhzj/7/
let pendingTasks = 31;
let completedTasks = 69;
function drawRingProgress(pendingTasks, completedTasks) {
var el = document.getElementById('graph'); // get canvas
let progress_percentage = Math.floor((completedTasks / (completedTasks + pendingTasks)) * 100) || 0;
var options = {
// percent: el.getAttribute('data-percent') || 25,
percent: progress_percentage,
// size: 110,
size: el.getAttribute('data-size') || 220,
lineWidth: el.getAttribute('data-line') || 15,
rotate: el.getAttribute('data-rotate') || 0
}
var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';
if (typeof (G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(span);
el.appendChild(canvas);
ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 3.2;
var drawCircle = function (color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};
drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#046582', options.lineWidth, options.percent / 100)
}
drawRingProgress(pendingTasks, completedTasks);
【问题讨论】：
-
我之前在使用
transform和rotate而不使用save和restore时遇到过问题。我不知道这是否是其中之一，但你能链接到你的代码的工作示例吗？ -
补充一下，我还看到了在创建弧线后绘制而不关闭路径
ctx.closePath();时出现的问题。 -
感谢@Justin，我将工作示例的链接添加到问题中。
-
我现在没有时间，但很快我注意到，当我检查一个项目是否完整时，如果我控制台日志
completedTasks它不会增加 1，除了第一个项目，休息增加很多。你的百分比数学也是错误的。如果我有 10 个pendingTasks和 10 个completedTasks我应该得到 100%，因为我已经完成了所有这些。您的公式显示 50%。此外，当我添加一堆任务并检查它们时，图表没有任何反应。最后应该有一个删除按钮出现吗？好像是这样，但我还没有看到。 -
确实有关于函数的工作要做，但我想知道，假设函数正在工作，并且变量已正确更新，我可以在哪里以及如何调用
drawRingProgress。我对变量pendingTasks和completedTasks的逻辑是，如果在某个时间点列表上有一组 20 个任务，其中 10 个已完成，那么进度是 50%。您正在考虑将 10 个任务从待处理转换为完成，这当然也是一种有效的方法。删除按钮不见了，但您可以单击右侧的任务框。
标签： javascript html css progress-bar css-shapes