jQuery如何加载图像的一部分答案

【问题标题】：jQuery how to load part of imagejQuery如何加载图像的一部分
【发布时间】：2013-03-05 20:03:27
【问题描述】：

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

我想创建类似上图的东西，但我找不到加载部分渐变的方法，例如：

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

【问题讨论】：

那张图片你是怎么显示的，你用<canvas>吗？
我猜你可以使用 canvas 元素并在图像上创建某种蒙版来做到这一点。不完全确定如何，但我相信这是可能的。
stackoverflow.com/questions/12673527/…
@Bergi 需要兼容IE7，所以我觉得不能用canvas。没想到这么难
快速组合起来。可能会让你走上正确的道路。 jsfiddle.net/j08691/sAUeq

标签： javascript jquery slider

【解决方案1】：

如果你不需要动态替换图片，我建议在Photoshop等图片工具中准备。

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

否则我不知道。

【讨论】：

【解决方案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" />

【讨论】：

【解决方案3】：

由于您要向后兼容，我将根据 Bertrand 的建议进行构建。 . .您可以轻松制作一个“精灵”图像，其中包含滑块的所有各种“阶段”（即完成 20%、完成 40% 等），并在不同的 CSS 类中引用它的每个阶段。

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

【讨论】：

会有水平滑块，其值将显示在该圆形滑块上。所以需要动态方法（这是我的学校项目）
嗯，理论上，你还是可以做到的。 . .对于滑块的每个可能值，您只需要在 sprite 文件中有一个状态。但是，如果滑块从 1 变为 100，并且您可以以 1 的步长向上和向下移动，这将产生一个非常大的精灵。不过，大型精灵文件并不少见。
就动态更改而言，这实际上非常简单（尽管如此，还是很大）。您将为每个滑块点创建一个样式，并使每个点的值成为相应类名的一部分。这样，您可以将滑块值直接输入到更改类的函数中，作为更新后的类名的一部分。

【解决方案4】：

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

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

【讨论】：