javascript - 添加一个按钮到 jQuery-Knob slider

Question

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

我决定通过 JavaScript 添加 div 元素，然后将拖拽的原生 Jquery Knob 参数绑定(bind)到它。

这是我所做的

这是我的代码

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 的演示这与您的要求类似。

输出屏幕截图: