3

我正在尝试创建一些交互式旋钮，就像您可以在老式电视和收音机中找到的那样。我正在使用KnobKnob.js来允许用户旋转。它有时表现得很奇怪，但鉴于可用于这种特殊需求的插件很少，而且我没有时间，我还是决定试一试。

我想做的是根据旋钮矩形部分的旋转角度<div id="centralKnob">或在我的代码中更改视频源，以复制 Channels 旋钮的行为。用户也应该能够只点击周围的链接来做到这一点。

在此处输入图像描述

因此，我认为最好的方法是根据旋钮的当前旋转角度更改源。由于我对 JS/jQuery 很陌生，我不知道如何获取元素的角度，所以我环顾四周，找到了这篇文章。他们做什么：

var el = document.getElementById("centralKnob");

var st = window.getComputedStyle(el, null);

var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "Either no transform set, or browser doesn't do getComputedStyle";

var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');

var values = tr.split('(')[1];
whatever = tr.split(')')[0];
whatever = tr.split(',');

var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];


var angle = Math.round(Math.asin(b) * (180/Math.PI));

这应该给出旋钮的当前角度。但是我该如何做到这一点，以便在每次用户更改角度时重新计算角度，并且只要旋钮位于 X(deg) 和 Y(deg) 之间，视频源就会改变？

提前致谢。我也欢迎任何关于如何使整个事情更好地工作的建议或建议，特别是如何让用户顺利旋转旋钮。此外，我知道旋转拨号盘和旋钮在网页设计中并不是一个好主意，也不是用鼠标控制的最佳选择，但这比实际的公共网站更具技术挑战。

4

1 回答 1

5

我过去做过这样的事情。

http://jsfiddle.net/gTDdp/16/

（通过一些调整应该可以创建一个旋钮。）我为移动设备添加了触摸事件

    var dragging = false

    $(function() {
        init();
        var target = $('#target')
        var offset_x = -256;
        var offset_y = 356;
        var angle = 0;
        var startAngle;
        var slices = 8;
        var sliceAngle = 360 / slices;
        target.mousedown(function(e) {
            var mouse_x = e.pageX;
            var mouse_y = e.pageY;
            var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
            dragging = true
            startAngle = ((radians * (180 / Math.PI) * -1) + 90) - angle;
        })
        $(document).mouseup(function() {
            dragging = false;
            var slice = (angle + (sliceAngle/2)) / sliceAngle;
            if(slice < 0){
                slice = 12 + slice;
            }else if(slice > 12){
                slice = 12 - slice;
            }

            // Move circle in perfect position
            angle = (Math.floor(slice) * (360 / slices));
            target.css('-moz-transform', 'rotate(' + angle + 'deg)');
            target.css('-moz-transform-origin', '50% 50%');
            target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
            target.css('-webkit-transform-origin', '50%, 50%');
            target.css('-o-transform', 'rotate(' + angle + 'deg)');
            target.css('-o-transform-origin', '50% 50%');
            target.css('-ms-transform', 'rotate(' + angle + 'deg)');
            target.css('-ms-transform-origin', '50% 50%');

            alert(Math.floor(slice));
        })
        $(document).mousemove(function(e) {
            if (dragging) {
                var mouse_x = e.pageX;
                var mouse_y = e.pageY;
                var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
                var degree = (radians * (180 / Math.PI) * -1) + 90;
                angle = degree - startAngle;
                if(angle < 0){
                    angle = 360 + angle;   
                }else if(angle > 360){
                    angle = 360 - angle;
                }
                target.css('-moz-transform', 'rotate(' + angle + 'deg)');
                target.css('-moz-transform-origin', '50% 50%');
                target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
                target.css('-webkit-transform-origin', '50%, 50%');
                target.css('-o-transform', 'rotate(' + angle + 'deg)');
                target.css('-o-transform-origin', '50% 50%');
                target.css('-ms-transform', 'rotate(' + angle + 'deg)');
                target.css('-ms-transform-origin', '50% 50%');
            }
        })
    })


    function touchHandler(event)
    {
     var touches = event.changedTouches,
        first = touches[0],
        type = "";

         switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }        
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
    }

    function init()
    {
       document.addEventListener("touchstart", touchHandler, true);
       document.addEventListener("touchmove", touchHandler, true);
       document.addEventListener("touchend", touchHandler, true);
       document.addEventListener("touchcancel", touchHandler, true);    
    }
于 2013-08-25T09:49:34.610 回答