循环进度表

Question

一切！

我正在使用jQuery Knob为网络项目创建循环进度表。

一切顺利，但我在编码/设计方面遇到了麻烦。我是一个视觉学习者，所以我画了一个插图，可能更好地解释了我的问题。

默认情况下，此插件生成的刻度盘的内部填充源自一个边缘并持续流向另一个边缘（请参阅：插图的后半部分）。

我想知道是否可以修改此行为，并且内部填充源自表盘的中心点，以相同的方式向外传播，直到它碰到表盘的边缘。

虽然我有一些jQuery / Javascript chops，但对于Canvas来说，我是一个新手。

任何想法，想法或指导都会非常感激！

Answer 1

你需要几个部分来完成这项工作：

1. 您需要使用旋钮“光标”模式，以便jQuery Knob知道从中心开始绘图。
2. 您需要通过readonly指令将光标“锁定”到位，以确保人们在绘制图形后不旋转图形。
3. 您需要通过change事件每次增量重绘旋钮（mousemove或类似事件也可能有效）。

所以基本上元素看起来像这样：

<input data-readonly="true" data-cursor="true" type="text" value="75" class="knob" data-width="140" data-fgcolor="#ffa800" style="width: 74px; height: 46px; position: absolute; vertical-align: middle; margin-top: 46px; margin-left: -107px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 28px Arial; text-align: center; color: rgb(255, 168, 0); padding: 0px;">

请注意，我们正在制作旋钮readonly，我们正在使用data-cursor。这些是这里唯一重要的部分。看看JS，我们看到：

var ratio = 20; // be warned: I shouldn't be using a global

function Cur(x) {
    return x/100; // we use x/100 here because that's what it looks like in jquery.knob.js
}

ratio变量将成为我们乱用的变量（一旦变化，“填充”增加或减少。Cur()函数是我们将绑定到{的代理函数在Knob API参考中概述了{1}}选项。对于那些不太了解JS如何工作的人来说这是非常重要的，但它确实有用。所以当我们初始化Knob对象时，它将如下所示：

cursor

显然，神奇发生在$(".knob").knob({ draw : function () { console.log("drawing..."); this.cursorExt = Cur.bind(null, ratio)(); } }); - 这确保了Cur.bind(null, ratio)()（通过比率函数ratio）的值传递到旋钮的内部。然后，我们需要为它设置动画（或以某种方式确保图形更新）：

Cur()

那应该这样做。请参阅上述here的实现。