jquery - 圆形进度表

Question

全部!

我正在使用jQuery Knob为网络项目创建一个圆形进度表。

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

默认情况下，此插件生成的表盘的内部填充从一个边缘开始并连续流向另一边缘(参见:插图的后半部分)。

我想知道是否可以修改此行为，并使内部填充从表盘的中心点开始，以相同的方式向外传播，直到到达表盘的边缘。

虽然我有一些 jQuery/Javascript 能力，但对于 Canvas 来说我完全是新手。

任何想法、想法或指导将不胜感激!

Answer 1

您需要几个部件才能完成这项工作:

1. 您需要使用 Knob“光标”模式，以便 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;">

请注意，我们将旋钮设置为只读，并且我们使用数据光标。这些是这里唯一重要的部分。查看 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() 函数是一个代理函数，我们将绑定(bind)到 Knob API 引用中概述的 cursor 选项。对于不真正了解 JS 工作原理的人来说，这很重要，但它确实有效。所以当我们初始化 Knob 对象时，它看起来像这样:

$(".knob").knob({
    draw : function () {
        console.log("drawing...");
        this.cursorExt = Cur.bind(null, ratio)();
        }
});

显然，神奇的事情发生在 Cur.bind(null,ratio)() 处——这确保了 ratio 的值(通过比率函数 Cur ()) 传递到 Knob 的内部。然后，我们需要为其设置动画(或以某种方式确保图形更新):

$( "#go" ).click(function() {
    $({value: 20}).animate({value: 300}, {
        duration: 1000,
    easing:'swing',
    step: function() {
        ratio = this.value;           // ratio updates..
        $('.knob').trigger('change'); // and we pass through the new cursor size via a 'change' ping
    }
    })
});

这样就可以了。请参阅上述的实现 here .