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

【问题标题】：how to add image for fgcolor in jquery knob如何在 jquery 旋钮中为 fgcolor 添加图像
【发布时间】：2014-10-27 10:32:19
【问题描述】：

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

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

请专家帮助我实现这一目标。

提前致谢。

【问题讨论】：

标签： jquery canvas jquery-knob

【解决方案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 旋钮的“绘制”函数中设置 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 等），三角公式会有所不同。

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

【讨论】：

【解决方案2】：

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

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

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

您可以像这样将光标更改为您的自定义图像：

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

【讨论】：