Jquery 通过mousemove/touchmove错误进行SVG角度旋转

我想用一个手指通过mousemove/touchmove旋转svg循环

我尝试了许多js脚本（例如和），它们的示例非常完美，但是当我尝试我的示例时，我总是看到两个bug：

旋转只在圆形的下半部分起作用，在圆形的上半部分起作用-它是反向旋转

旋转速度非常慢（在演示中，轮子强烈地跟随鼠标/手指）

我的演示：（请看它以前是如何工作的）

我还尝试了这个简单的示例-结果与上面的类似：

var dragging = false
$(function() {
    var circles = ['circle-l1', 'circle-l2', 'circle-l3', 'circle-l4', 'circle-l5', 'circle-l6', 'circle-l7'];
    $.each(circles, function(ind, val) {
        var target = $('#'+val)
        target.mousedown(function() {
            dragging = true
        })
        $(document).mouseup(function() {
            dragging = false
        })
        target.mousemove(function(e) {
            if (dragging) {
                var mouse_x = e.pageX;
                var mouse_y = e.pageY;
                var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
                var degree = (radians * (180 / Math.PI) * -1) + 90;
                target.css('transform', 'rotate(' + degree + 'deg)');
            }
        });
    });
});

Domo2：

您能否解释一下，为什么我的svg不能正确旋转，以及如何修复它（或者您知道最好的脚本）

关于第二个示例：

var度=（弧度*（180/Math.PI）*-1）+90

我将
+90
更改为
+180
，这允许上半部分旋转。此外，从上面的行中删除
（180/Math.PI）
，可能有助于实现所需的结果

对于速度，您可以更改此行上的值：

Math.atan2（鼠标x-10，鼠标y-10）

我将其设置为
mouse\u x-100，mouse\u y-100
，速度更快。
关于第二个示例：

var度=（弧度*（180/Math.PI）*-1）+90

我将
+90
更改为
+180
，这允许上半部分旋转。此外，从上面的行中删除
（180/Math.PI）
，可能有助于实现所需的结果

对于速度，您可以更改此行上的值：

Math.atan2（鼠标x-10，鼠标y-10）

我将其设置为
鼠标x-100，鼠标y-100
速度更快。
您可以使用SMIL规范。查看此处是否有帮助。
您可以使用SMIL规范。查看此处是否有帮助。
您需要从圆心减去当前指针位置，以获得指针相对于圆心的度数。
这两个值必须位于同一坐标系中，因此必须将指针位置转换为目标（父节点）坐标系。
var拖动=false
$（函数（）{
变量圆=['circle-l1'，'circle-l2'，'circle-l3'，'circle-l4'，'circle-l5'，'circle-l6'，'circle-l7']；
$。每个（圆、函数（ind、val）{
变量目标=$（'#'+val）
target.mousedown（函数（）{
拖动=真
})
$（文档）.mouseup（函数（）{
拖动=错误
})
target.mousemove（函数（e）{
如果（拖动）{
var ctm=target[0]。parentNode.getScreenCTM（）
var p=document.getElementById（“rus前端”）.createSVGPoint（）
p、 x=e.clientX
p、 y=e.clientY
p=p.matrixTransform（ctm.inverse（））
var mouse_x=e.pageX；
var mouse_y=e.pageY；
var弧度=数学atan2（1990年-p.x，1900年-p.y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'transform'，'rotate（'+degree+'deg'）；
}
});
});
});
html，正文，#循环{
宽度：100%；
身高：100%；
}
#圆形{
位置：相对位置；
文本对齐：左对齐；
身高：100%；
宽度：自动；
左：7%；
}
#圆形svg{
显示：内联块；
身高：100%；
宽度：自动；
}
#圆形[id^=circle-l]{
变换原点：中心；
光标：指针；
}
#圆形#圆形-l1{
转化来源：52%50%；
}
您需要从圆心减去当前指针位置，以获得指针相对于圆心的度数。
这两个值必须位于同一坐标系中，因此必须将指针位置转换为目标（父节点）坐标系。
var拖动=false
$（函数（）{
变量圆=['circle-l1'，'circle-l2'，'circle-l3'，'circle-l4'，'circle-l5'，'circle-l6'，'circle-l7']；
$。每个（圆、函数（ind、val）{
变量目标=$（'#'+val）
target.mousedown（函数（）{
拖动=真
})
$（文档）.mouseup（函数（）{
拖动=错误
})
target.mousemove（函数（e）{
如果（拖动）{
var ctm=target[0]。parentNode.getScreenCTM（）
var p=document.getElementById（“rus前端”）.createSVGPoint（）
p、 x=e.clientX
p、 y=e.clientY
p=p.matrixTransform（ctm.inverse（））
var mouse_x=e.pageX；
var mouse_y=e.pageY；
var弧度=数学atan2（1990年-p.x，1900年-p.y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'transform'，'rotate（'+degree+'deg'）；
}
});
});
});
html，正文，#循环{
宽度：100%；
身高：100%；
}
#圆形{
位置：相对位置；
文本对齐：左对齐；
身高：100%；
宽度：自动；
左：7%；
}
#圆形svg{
显示：内联块；
身高：100%；
宽度：自动；
}
#圆形[id^=circle-l]{
变换原点：中心；
光标：指针；
}
#圆形#圆形-l1{
转化来源：52%50%；
}

请记住，答案应该包含的不仅仅是一个链接。请记住答案应该包含的不仅仅是一个链接。太棒了！什么是1990年和1900年&？为什么是这个数字？这是你的圆圈的中心。我本可以用BBox来计算它，以使代码更加通用，但我认为最好保持简单；-）T