通过mousemove / touchmove bug进行SVG角度旋转
我想用一个点指针通过mousemove / touchmove旋转svg循环。
我尝试了很多js脚本（例如Touchy Wheel Demo和Rotate Dial Demo ），他们的例子很完美，但是当我尝试我的例子时，我总是看到两个bug：
- 旋转仅在圆形的下部，顶部 – 它反向旋转。
- 旋转工作非常缓慢（在演示轮中强烈跟随鼠标/手指）。
我的演示： https ：//jsfiddle.net/0L87uabc/8/（请看之前如何在作者的演示页面上工作）
此外，我尝试这个简单的例子-result类似于上面：
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： https ：//jsfiddle.net/0L87uabc/10/
你能解释一下，为什么我的svg没有正确旋转以及如何解决它（或者你知道最好的脚本）？
你需要从圆心中减去你当前的指针位置，以获得指针相对于中心的程度。 两个值都需要在同一坐标系中，因此您必须将指针位置转换为目标（parentNode）坐标系。
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 ctm=target[0].parentNode.getScreenCTM() var p=document.getElementById("rus-front").createSVGPoint() px=e.clientX py=e.clientY p=p.matrixTransform(ctm.inverse()) var mouse_x = e.pageX; var mouse_y = e.pageY; var radians = Math.atan2(1990 - px , 1900 - py); var degree = (radians * (180 / Math.PI) * -1) + 90; target.css('transform', 'rotate(' + degree + 'deg)'); } }); }); });
html, body, #circular { width: 100%; height: 100%; } #circular { position: relative; text-align: left; height: 100%; width: auto; padding-left: 7%; } #circular svg { display: inline-block; height: 100%; width: auto; } #circular [id^=circle-l] { transform-origin: center center; cursor: pointer; } #circular #circle-l1 { transform-origin: 52% 50%; }
在第二个例子：
var degree = (radians * (180 / Math.PI) * -1) + 90;
我将+ 90改为+ 180 ，这允许在上半部分旋转。 此外，从上面的行中删除(180 / Math.PI)可以帮助您实现所需的结果。
对于速度，您可以更改此行上的值：
Math.atan2(mouse_x - 10, mouse_y - 10);
我把它设置为mouse_x - 100, mouse_y - 100 ，它更快。
您可以使用SMIL规范。 看看这里有什么帮助CSS技巧 。