2

全部！

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

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

所需结果的图示，其中圆形填充源自一个点并从该点在两个方向上均等地传播

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

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

虽然我有一些 jQuery / Javascript 印章，但在 Canvas 方面我完全是新手。

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

4

1 回答 1

2

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

  1. 您需要使用旋钮“光标”模式，以便 jQuery 旋钮知道从中心开始绘图。
  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()函数是一个代理函数，我们将绑定到cursorKnob API 参考中概述的选项。这对于那些不是很了解 JS 是怎么工作的，但是确实可以。所以当我们初始化 Knob 对象时，它会是这样的：

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

显然，魔法发生在Cur.bind(null, ratio)()——这确保了ratio（通过比率函数Cur()）的值传递到旋钮的内部。然后，我们需要对其进行动画处理（或者以某种方式确保图形更新）：

$( "#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
    }
    })
});

那应该这样做。在此处查看上述内容的实现。

于 2013-10-11T23:41:08.653 回答