Перетаскивание с помощью Raphael js

Я пытаюсь создать игру-головоломку в javascript, используя raphael, чтобы позаботиться о перетаскивании и вращении частей.

Проблема, с которой я сталкиваюсь: всякий раз, когда я поворачиваю изображение, его система координат также поворачивается, и перетаскивание больше не работает, как ожидалось.

Edit2: Вот простой тестовый пример. Перетащите эллипс, поверните его и повторите попытку: http://www.tiagoserafim.com/tests/dragdrop.html

Редактировать: Чтобы уточнить, всякий раз, когда я перемещаю мышь на 1 пиксель вправо (x++), изображение также перемещается на 1 пиксель по координате x, но в своей собственной системе координат, которая может вращаться, как показано на изображении ниже.

alt text
(источник: oreilly.com)

Как объясняется в SVG Essentials, это ожидаемое поведение.

Мой вопрос: есть ли элегантный способ сделать то, что я хочу, или мне придется вручную вычислять правильные координаты с помощью матрицы вращения?

Другие JS-библиотеки или предложения будут приветствоваться, даже если они означают потерю поддержки IE.


javascript svg raphael
person Tiago    schedule 05.07.2010    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как также отмечалось в этой статье, важен порядок преобразований.

  1. Переместите объект так, чтобы центральная точка (или любая другая точка, вокруг которой вы хотите вращаться) находилась на 0,0.
  2. Повернуть
  3. Перевести обратно на предыдущую позицию

Также обратите внимание, что существует перегруженный вариант rotate, который уже делает это.

<html>
    <head>
        <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
        <script type="text/javascript">
            function Draw()
            {
                var x = 150, y = 150;
                var rotation = 0;
                var paper = Raphael(0, 0, 800, 800);
                var e = paper.ellipse(x, y, 30, 10);
                paper.path("M150 150L800 150");
                window.setInterval(function()
                {
                    x += 10;
                    rotation += 10;
                    e.translate(10, 0);
                    e.rotate(rotation, x, y);
                }, 500);
            }
        </script>
    </head>
    <body onload="Draw()">
    </body>
</html>
person Dark Falcon    schedule 05.07.2010
comment
Привет! Да, именно этим я и занимаюсь. Проблема возникает впоследствии, когда я пытаюсь перетащить, и изображение перемещается по своей собственной координате x вместо, например, горизонтальной координаты x по умолчанию. - person Tiago; 05.07.2010
comment
Привет еще раз! Спасибо, что уделили время работе над этим кодом. Я попробовал это здесь, и если вы переведете на 10 пикселей вместо 1, вы увидите мою проблему: изображение не следует прямой горизонтальной линии. - person Tiago; 05.07.2010
comment
Я добавил прямую горизонтальную линию и увеличил расстояние перемещения и угол поворота. Он по-прежнему следует прямой линии. Возможно, вы используете старую версию Raphael? Я использую свежую копию. - person Dark Falcon; 05.07.2010
comment
Мой не работал, как ожидалось, потому что я увеличил перевод до 10 пикселей, но я также не изменил x+= 10. Благодаря вам теперь я вижу другое применение для поворота (транс, х, у). Но все же, я думаю, что это не решает исходную проблему. Предположим, вы поворачиваете изображение на 45 градусов, а затем переводите его на (10, 0). Он больше не будет двигаться по горизонтали из-за новой системы координат. Таким образом, он прерывает перетаскивание, потому что дает значения дельты относительно системы координат по умолчанию. Еще раз спасибо за ваше время и терпение. - person Tiago; 06.07.2010
comment
Я до сих пор не могу воспроизвести. Каждый раз, когда я поворачиваюсь, используя версию, которая принимает точку, она работает отлично. Можете ли вы предоставить код, который не работает? - person Dark Falcon; 06.07.2010
comment
tiagoserafim.com/tests/dragdrop.html Привет, Дарк! Создав этот код, я смог убедиться, что вы правы: translate(dx, dy) действительно работает так, как должно. Моя проблема в том, что я возился с внутренними атрибутами {cx, cy}. Я покопаюсь в источнике raphael, чтобы увидеть, как работает перевод, и посмотреть, смогу ли я заставить его работать с предоставленным методом перетаскивания по умолчанию. Большое спасибо за ваше время и терпение! - person Tiago; 06.07.2010
comment
Тиаго, следует ли выбрать ответ Темного Сокола как выбранный? Не трудитесь мне отвечать :) - person Fabiano Soriani; 06.07.2010
comment
@Fabiano: Да, глупо, что я не принял ответ правильно :-) - person Tiago; 07.07.2010