jQuery如何加载部分图像

Question

我有点问题。我需要创建一个圆形滑块，我没有找到任何可以帮助我的库，所以我觉得我需要自己编写它。
这是我的问题：

我想创建如上图所示的内容，但我找不到加载部分渐变的方法，例如：

甚至可以在js中加载部分图像吗？

Answer 1

如果您不需要动态替换图像，我建议您在Photoshop等图像工具中进行准备。

如果您要替换的图像很少，我会在Photoshop中准备它们并通过javascript和css解决方案进行更改

否则我不知道。

Answer 2

无法在纯JavaScript中加载图像的一部分。相反，你可以使用精灵图像并播放背景位置：

function getBgPos(pct) {
  if (pct < 12.5) { return '0 0'; }
  else if (pct < 25) { return '-100px 0'; }
  else if (pct < 37.5) { return '-200px 0'; }
  else if (pct < 50) { return '-300px 0'; }
  else if (pct < 62.5) { return '-400px 0'; }
  else if (pct < 75) { return '-500px 0'; }
  else if (pct < 87.5) { return '-600px 0'; }
  else if (pct < 100) { return '-700px 0'; }
  else { return '-800px 0'; }
};

i = 0;
setInterval(function () {
  jQuery('#loader').css('background-position', getBgPos(i));
  i += 12.5; if (i > 100) i = 0;
}, 500);

#loader {
  display: block;
  width: 100px;
  height: 100px;
  background: yellow url(https://i.stack.imgur.com/Xsf4k.png) no-repeat 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loader" src="https://i.stack.imgur.com/ArcTX.png" />

Answer 3

由于你要向后兼容，我将建立Bertrand的建议。 。 。你可以很容易地制作一个“精灵”图像，其中包含滑块的所有“阶段”（即完成20％，完成40％等），并在不同的CSS类中引用它的每个阶段。

这样，所有阶段都会在页面加载时作为一个图像加载，您可以使用JavaScript更新显示滑块的元素的类，更新滑块的进度。

Answer 4

我同意画布选项。 另外 - 根据您的尝试，我建议 - http://anthonyterrien.com/knob/

我使用图像自定义了表盘，您可以设置显示部分的颜色。它可能不是您的整体解决方案 - 但理想情况下会指向正确的方向。