向 jQuery-Knob 滑块添加一个按钮

Question

我需要你的帮助。我正在开发一个项目，以实现一个带有可拖动按钮控制的圆形滑块。我决定使用this jQuery-Knob slider。这很棒，但我需要添加可以设置样式和拖动的按钮

我决定通过 javascript 添加 div 元素，然后绑定原生 Jquery Knob 的拖动参数。

我做了什么

这是我的代码

function addBtnControl(self) {
              // cache variables
              var button = document.getElementById('knob-ctrl'),
                  cx = 22*self.scale,
                  cy = 20*self.scale,
                  a = self.arc(self.cv),
                  start = xyOnArc(self.xy-cx, self.xy-cy, self.radius/self.scale, a.s);

              // check if pointer-events are supported
              // if not than use fallback btn ctrl for IE
              App.config.Modernizr.addTest('csspointerevents',function(){
                return 'pointerEvents' in document.documentElement.style;
              });
              if (App.config.Modernizr.csspointerevents) {
                self.cursorExt = 0;

                button.style.left = start.x + "px";
                button.style.top = start.y + "px";
              }

              function xyOnArc(cx, cy, radius, radianAngleX) {
                var x = cx + radius * Math.cos(radianAngleX);
                var y = cy + radius * Math.sin(radianAngleX);
                return ({
                    x: x,
                    y: y
                });
              }
            }

            // init Button Ctrl

            addBtnControl(this); 

我动态添加了一个按钮并借用了参数，这些参数必须足以制作一个非常合适的可拖动控件，但我做错了，因为如果我缩放浏览器或只是在另一个屏幕尺寸上打开它看起来像这样

所以传递给它的函数和参数有问题。

Answer 1

实际上 jQuery 旋钮使用的是 Canvas，因此使用它添加外部图层变得更加复杂。

另外，我建议使用类似于旋钮的 jQuery roundSlider 插件，但它仅基于 div 元素构建。因此，您可以根据自己的意愿进行任何自定义外观。

更多详情请查看demos 和documentation 页面。

从jsFiddle查看此演示，这与您的要求相似。

输出截图：