Question

对于我正在进行的项目，我需要有一个轮子，必须有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/

难以保持元素旋转一致吗？

0 个答案: