Перетащите с помощью Raphael JS - PullRequest
Новая
       14

Перетащите с помощью Raphael JS

4 голосов
/ 05 июля 2010

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

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

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

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

альтернативный текст http://commons.oreilly.com/wiki/images/f/fa/SVG_Essentials_I_5_tt93.png

Как описано в Основы SVG , это ожидаемое поведение.

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

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

1 Ответ

3 голосов
/ 05 июля 2010

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

  1. Переведите объект так, чтобы центральная точка (или любая другая точка, которую вы хотите повернуть) была в 0,0 * 1004.*
  2. Rotate
  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>
...