0

对于我目前正在从事的一个项目，我需要一个轮子，必须有一个 1:1 的旋转。

到目前为止，我已经获得了一个点击和拖动旋转机制，但问题是它非常不稳定，从某种意义上说，我已经让它完美地工作，然后在某个时刻（没有我更改代码）它会突然变得混乱即使在页面刷新和缓存清除之后，也无法正确旋转。

在将其从本地服务器移至实时测试服务器后，我首先注意到了这一点。另一个奇怪的特征是，当鼠标在滚轮边界之外时它会完美旋转，当回到滚轮边界时会开始混乱（我用不可见的 SVG 圆圈形式的捕鼠器检测到鼠标移动，完美地重叠图像）。

整个事情非常简单：

$('.mouse_trap').mousedown(function(){
        intervalvar = setInterval(monitorClicks, 24);
    }).mouseup(function(){
        clearInterval(intervalvar);
    })

当用户单击并拖动滚轮时，它会相应地设置和停止 setInterval（同时一个单独的函数正在监视鼠标位置）。

function monitorClicks(){
    xrel = xpos - midx;
    yrel = -(ypos - midy);

    a = Math.atan2(yrel,xrel);
    a = a *  (180 / Math.PI);
    a = -a;

    roulette.css({
        '-webkit-transform' : 'rotate(' + a + 'deg)',
        '-ms-transform' : 'rotate(' + a + 'deg)',
        '-o-transform' : 'rotate(' + a + 'deg)',
        '-moz-transform' : 'rotate(' + a + 'deg)',
        'transform' : 'rotate(' + a + 'deg)'
    });

    console.log(a); 

}

我找到鼠标位置，将中点变成圆的中心，然后使用坐标应用 atan2 来获得我的角度。

你可以在这里找到实验：

http://www.techgoldmine.com/spinny_thing/

4

0 回答 0