Угол поворота SVG с помощью ошибки mousemove/touchmove

Я хочу вращать svg-круги с помощью mousemove/touchmove одним указательным пальцем.

Я испробовал множество js-скриптов (например, Touchy Wheel Demo и Rotate Dial Demo), и их примеры работают отлично, но когда я пробую свой пример, я всегда вижу две ошибки:

  1. Вращение работает только в нижней части кругового, в верхней части - обратное вращение.
  2. Вращение работает очень медленно (в демо колеса сильно следуют за мышью/пальцем).

Моя демонстрация: https://jsfiddle.net/0L87uabc/8/ (пожалуйста, посмотрите, как это работает на демонстрационной странице автора ранее)

Также я пробую этот простой пример - результат аналогичен приведенному выше:

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)');
            }
        });
    });
});

Домо2: https://jsfiddle.net/0L87uabc/10/

Можете ли вы объяснить, почему мой svg не вращается правильно и как это исправить (или вы знаете лучший скрипт для этого)?


svg jquery rotation angle touchmove
person skywind    schedule 17.09.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

На втором примере:

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, и это намного быстрее.

person djoq    schedule 18.09.2015

arrow_upward
-2
arrow_downward

Вы можете использовать спецификацию SMIL. Посмотрите, поможет ли здесь что-нибудь приемы CSS.

person MoonCricket    schedule 18.09.2015
comment
Помните, что ответ должен содержать немного больше, чем просто ссылку. - person René Hoffmann; 18.09.2015

arrow_upward

arrow_downward

person    schedule
comment
Замечательно! Что такое 1990 и 1900&? Почему это цифры? - person skywind; 20.09.2015
comment
Это центр ваших кругов. Я мог бы использовать BBox, чтобы вычислить его, чтобы более обобщить код, но подумал, что было бы лучше сделать его простым ;-) - person Holger Will; 20.09.2015
comment
Спасибо! Можете ли вы помочь сохранить последнюю / текущую позицию? stackoverflow.com/ вопросы/32682503/ - person skywind; 20.09.2015