1

我已经实现了一个电唱机，我成功地让它顺时针旋转，但是，我想让它双向旋转。:-)

我已经修改了我找到的脚本，添加了一些触摸事件，因为我主要需要它在 iPad 上工作。

这是它的样子：

function getDistance(x1,y1,x2,y2){
    return Math.sqrt((x1-x2) * (x1-x2) + (y2-y1) * (y2-y1));
}
var div = $("#turntable");
var rotation = 0; 
var isDragging = false;

div.bind('touchstart mousedown', function(event) {
    event.preventDefault();
    isDragging = true;
    lastX = position(event).x;
    lastY = position(event).y;
});
div.bind('touchend mouseup', function(event) {
    event.preventDefault();
    isDragging = false;
});
div.bind('touchmove mousemove', function(event) {
    if (isDragging) {
        var curX = position(event).x;
        console.log(curX);
        var curY = position(event).y;
        console.log(curY);   
        rotation += getDistance(curX,curY,lastX,lastY); 
        var rotateCSS = 'rotate(' + rotation + 'deg)';
        $(this).css({
            '-webkit-transform': rotateCSS
        });  
        lastX = curX;
        lastY = curY;
    }
})

我需要在我的 touchmove 事件中设置一个 if 来检查你旋转的方向，但我无法弄清楚。任何帮助将不胜感激！或者，如果您有其他方法，我很乐意听到。

这里是我从中获取脚本的原始 jsfiddle 的链接： jsfiddle

4

1 回答 1

2

目前，您的代码设置为根据鼠标在您的鼠标上移动的距离添加一定数量的度数<div>。遗憾的是，这不会导致准确的旋转 - 如果您将鼠标旋转到靠近圆心的位置，它会比鼠标旋转得更慢，并且如果您围绕边界框（在边界半径截止区域）旋转它，它实际上会比鼠标旋转得更快。此外，由于您只检查鼠标移动时所经过的距离，因此它将始终为正数，从而导致单向旋转。

您需要做的是制定一个不同的公式，该公式计算鼠标经过的角度而不是经过的距离，并且一定要考虑负角度以允许反向旋转。完成此操作后，您可以将生成的整数传递给 CSS 分配，并且旋转功能应该可以正常工作。

于 2013-05-31T08:42:53.963 回答