jquery - 如何在 jquery 旋钮中为 fgcolor 添加图像

Question

我知道 jquery 旋钮是基于画布的。我仍然想知道在 jquery 旋钮中为 fgcolor 和光标添加图像的任何其他机会。就像我需要拖动指针图像一样。所以有机会实现吗？？？纠正我如果我错了。

我想制作这样的 jquery 旋钮 http://2.bp.blogspot.com/-S2LYDIMKGJM/UkVTQLDDv6I/AAAAAAAAAV8/zRhIDdhM3dY/s1600/home.jpg

专家很乐意帮助我实现这一目标。

提前致谢。

Answer 1

晚了一年多，但我是这样做的：

https://jsfiddle.net/gp536mv1/

基本上我插入了一个 div

<div class="knob">
  <input class="knob" value="0" data-linecap="round" >
  <div id="soundSymbol"></div>
</div>

与position:absolute：

#soundSymbol{position: absolute; font-size: 500%; pointer-events:none;}

并在jquery旋钮的“draw”函数中设置div的顶部和左侧

$("input.knob").knob({
    'draw': function () {
        var degInRad = this.cv*Math.PI/180;
        $('#soundSymbol').css({top:this.xy-this.radius*Math.cos(degInRad)-50, left: this.xy+this.radius*Math.sin(degInRad)-30});
    }
});

根据您使用的旋钮类型（angleArc、angleOffset 等），三角公式会有所不同。

希望对以后的读者有所帮助！

Answer 2

您可以使用 CSS 设置自定义光标：

因此，如果您像这样创建了 jQueryKnob：

$(".yourKnobClass").knob();

您可以将光标更改为您的自定义图像，如下所示：

$('.yourKnobClass').css( 'cursor', 'url(yourCustomCursor.png), auto' );